/* ==========================================================================
BMUP — Área de membro
==========================================================================
A moldura (barra lateral escura + cabeçalho branco) e o Diretório.
Medido em design-reference/src/app/components/layouts/DashboardLayout.tsx
e .../pages/dashboard/DashboardDirectory.tsx.
NOMES: tudo debaixo de .bmup-membro__ ou .bmup-dir__ / .bmup-anuncio__.
Os quatro ficheiros de CSS carregam em TODAS as páginas do site — a
separação em ficheiros não isola nada. Já colidimos duas vezes com nomes
curtos (.bmup-passos, .bmup-passo). Ver ferramentas/colisoes.py.
========================================================================== */
.bmup-membro {
/* O fundo da zona de conteúdo. Não é o --bmup-cinza-50 (#fafafa): o
desenho usa #f8f9fa, meio ponto mais azulado. */
--membro-fundo: #f8f9fa;
--membro-lateral: var(--bmup-preto);
--membro-borda: var(--bmup-cinza-800);
--membro-largura: 18rem; /* w-72 */
--membro-topo: 5rem; /* h-20 */
display: flex;
min-height: 100vh;
background: var(--membro-fundo);
font-family: var(--bmup-font-corpo);
color: var(--bmup-cinza-900);
}
/* ==========================================================================
BARRA LATERAL
========================================================================== */
.bmup-membro__lateral {
position: fixed;
inset: 0 auto 0 0;
z-index: 50;
display: flex;
flex-direction: column;
width: var(--membro-largura);
height: 100vh;
background: var(--membro-lateral);
color: var(--bmup-cinza-400);
border-right: 1px solid var(--membro-borda);
transform: translateX(-100%);
transition: transform .3s ease-in-out;
}
.bmup-membro__lateral.esta-aberta { transform: translateX(0); }
.bmup-membro__cortina {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(10, 10, 10, .4);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.bmup-membro__cortina.esta-aberta {
opacity: 1;
pointer-events: auto;
}
/* --- marca --- */
.bmup-membro__marca {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--membro-topo);
padding-inline: 1.5rem;
border-bottom: 1px solid rgba(39, 39, 42, .6);
flex-shrink: 0;
}
.bmup-membro__marca a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* O logótipo como no desenho: 48px de altura (h-12 na design reference de
2026-09-25; era h-8), cresce 5% ao passar o rato */
.bmup-membro__marca img {
display: block;
width: auto;
height: 3rem;
object-fit: contain;
transition: transform .3s;
}
.bmup-membro__marca a:hover img { transform: scale(1.05); }
.bmup-membro__fechar {
display: inline-flex;
padding: .5rem;
border: 0;
background: none;
color: var(--bmup-cinza-500);
cursor: pointer;
}
.bmup-membro__fechar:hover { color: var(--bmup-branco); }
/* --- quem está autenticado --- */
.bmup-membro__perfil {
display: flex;
align-items: center;
gap: 1rem;
padding: 2rem 1.5rem;
border-bottom: 1px solid rgba(39, 39, 42, .6);
flex-shrink: 0;
}
/* O anel de cobre à volta da fotografia: um gradiente de 2px que se vê por
baixo de um círculo preto ligeiramente menor. */
.bmup-membro__avatar {
width: 3rem;
height: 3rem;
padding: 2px;
border-radius: 50%;
background: linear-gradient(to top right, var(--bmup-cobre), var(--bmup-cobre-claro));
flex-shrink: 0;
}
.bmup-membro__avatar span,
.bmup-membro__avatar img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--bmup-preto);
color: var(--bmup-cobre-claro);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
object-fit: cover;
}
.bmup-membro__quem { min-width: 0; }
.bmup-membro__nome {
margin: 0;
font-family: var(--bmup-font-corpo);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-branco);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bmup-membro__plano {
margin: .125rem 0 0;
font-size: .75rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cobre);
}
/* --- navegação --- */
.bmup-membro__nav {
flex: 1;
padding: 1.5rem 1rem;
overflow-y: auto;
}
.bmup-membro__nav-titulo {
padding: 0 .75rem .5rem;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-600);
}
.bmup-membro__link {
position: relative;
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem .75rem;
margin-bottom: .375rem;
border-radius: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-400);
text-decoration: none;
transition: background-color .2s, color .2s;
}
.bmup-membro__link svg {
width: 1.125rem;
height: 1.125rem;
color: var(--bmup-cinza-500);
flex-shrink: 0;
transition: color .2s;
}
.bmup-membro__link:hover {
background: rgba(39, 39, 42, .3);
color: var(--bmup-branco);
}
.bmup-membro__link:hover svg { color: var(--bmup-cinza-300); }
.bmup-membro__link--activo,
.bmup-membro__link--activo:hover {
background: rgba(39, 39, 42, .5);
color: var(--bmup-branco);
}
.bmup-membro__link--activo svg,
.bmup-membro__link--activo:hover svg { color: var(--bmup-cobre); }
/* A barra de cobre colada à esquerda do item activo. */
.bmup-membro__link--activo::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: .25rem;
height: 1.5rem;
border-radius: 0 9999px 9999px 0;
background: var(--bmup-cobre);
}
/* Entradas ainda por construir: visíveis mas sem link, como o desenho faz na
lista de serviços do Perfil ("Upgrade necessário"). Esconder dava uma barra
lateral que muda de tamanho à medida que se constrói. */
.bmup-membro__link--breve {
opacity: .45;
cursor: default;
pointer-events: none;
}
.bmup-membro__breve {
margin-left: auto;
font-size: .625rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bmup-cinza-600);
}
/* --- sair --- */
.bmup-membro__sair-caixa {
padding: 1rem;
border-top: 1px solid rgba(39, 39, 42, .6);
flex-shrink: 0;
}
.bmup-membro__sair {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .75rem;
border-radius: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-400);
text-decoration: none;
transition: background-color .2s, color .2s;
}
.bmup-membro__sair svg {
width: 1.125rem;
height: 1.125rem;
color: var(--bmup-cinza-500);
}
.bmup-membro__sair:hover {
background: rgba(39, 39, 42, .5);
color: var(--bmup-branco);
}
/* ==========================================================================
ZONA PRINCIPAL
========================================================================== */
.bmup-membro__principal {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
}
.bmup-membro__topo {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--membro-topo);
padding-inline: 1rem;
background: var(--bmup-branco);
border-bottom: 1px solid var(--bmup-cinza-200);
flex-shrink: 0;
}
.bmup-membro__abrir {
display: inline-flex;
padding: .625rem;
margin-left: -.5rem;
border: 0;
border-radius: .75rem;
background: none;
color: var(--bmup-cinza-500);
cursor: pointer;
}
.bmup-membro__abrir:hover { background: var(--bmup-cinza-100); }
.bmup-membro__migalhas {
display: none;
align-items: center;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
}
.bmup-membro__migalhas b {
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-900);
}
.bmup-membro__migalhas svg {
width: 1rem;
height: 1rem;
margin-inline: .5rem;
color: var(--bmup-cinza-300);
}
/* No telemóvel as migalhas dão lugar ao título simples. */
.bmup-membro__titulo-movel {
margin: 0;
font-size: 1.125rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
.bmup-membro__accoes {
display: flex;
align-items: center;
gap: .75rem;
margin-left: auto;
}
.bmup-membro__pesquisa {
display: none;
position: relative;
}
.bmup-membro__pesquisa svg {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: var(--bmup-cinza-400);
pointer-events: none;
}
.bmup-membro__pesquisa input {
width: 16rem;
padding: .5rem 1rem .5rem 2.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 9999px;
background: var(--bmup-cinza-50);
font: inherit;
font-size: .875rem;
color: var(--bmup-cinza-900);
outline: none;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.bmup-membro__pesquisa input:focus {
border-color: var(--bmup-cobre);
background: var(--bmup-branco);
box-shadow: 0 0 0 3px rgba(172, 116, 80, .2);
}
.bmup-membro__sino {
position: relative;
display: inline-flex;
padding: .5rem;
border: 0;
border-radius: 50%;
background: none;
color: var(--bmup-cinza-500);
cursor: pointer;
}
.bmup-membro__sino:hover { background: var(--bmup-cinza-100); }
.bmup-membro__sino svg { width: 1.25rem; height: 1.25rem; }
.bmup-membro__sino--novo::after {
content: '';
position: absolute;
top: .375rem;
right: .375rem;
width: .5rem;
height: .5rem;
border: 2px solid var(--bmup-branco);
border-radius: 50%;
background: #ef4444;
}
.bmup-membro__conta {
display: flex;
align-items: center;
gap: .75rem;
padding: .375rem .75rem .375rem .375rem;
border: 1px solid transparent;
border-radius: 9999px;
text-decoration: none;
transition: background-color .2s, border-color .2s;
}
.bmup-membro__conta:hover {
background: var(--bmup-cinza-50);
border-color: var(--bmup-cinza-200);
}
.bmup-membro__conta-foto {
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 50%;
background: var(--bmup-preto);
color: var(--bmup-cobre-claro);
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
flex-shrink: 0;
}
/* A fotografia (2026-10-08): o ".bmup img { height: auto }" do bmup.css pesa
mais do que uma classe só, e uma foto ao comprido ficava oval. */
.bmup-membro__conta img.bmup-membro__conta-foto {
height: 2rem;
max-width: none;
}
.bmup-membro__conta-texto { display: none; line-height: 1.2; }
.bmup-membro__conta-nome {
margin: 0;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
.bmup-membro__conta-plano {
margin: 0;
font-size: .75rem;
color: var(--bmup-cinza-500);
}
.bmup-membro__corpo {
flex: 1;
padding: 1rem;
}
.bmup-membro__dentro {
width: 100%;
max-width: 72rem; /* max-w-6xl */
margin-inline: auto;
/* A entrada de cada página, como no DashboardLayout.tsx (motion.div:
opacity 0 -> 1, y 14 -> 0, 0.35s easeOut). Só `backwards`: acabada a
animação não fica transform nenhum — um transform aqui passava a ser o
contentor de tudo o que é position: fixed lá dentro. */
animation: bmup-membro-entra .35s ease-out backwards;
}
@keyframes bmup-membro-entra {
from { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
.bmup-membro__dentro { animation: none; }
}
/* ==========================================================================
DIRECTÓRIO
========================================================================== */
.bmup-dir__cabecalho {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bmup-dir__cabecalho h2 {
margin: 0;
/* Sem serifa, como no desenho (medido: ui-sans-serif 24px 700) */
font-family: var(--bmup-font-corpo);
font-size: 1.5rem;
font-weight: var(--bmup-peso-forte);
letter-spacing: -.02em;
color: var(--bmup-cinza-800);
}
.bmup-dir__cabecalho p {
margin: .25rem 0 0;
color: var(--bmup-cinza-500);
}
.bmup-dir__contador {
display: inline-flex;
align-items: center;
gap: .5rem;
align-self: flex-start;
padding: .5rem 1rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
}
.bmup-dir__contador::before {
content: '';
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #22c55e;
}
/* --- separadores --- */
.bmup-dir__separadores {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .25rem;
margin-bottom: 1.5rem;
border-radius: .75rem;
background: var(--bmup-cinza-100);
}
.bmup-dir__separador {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.25rem;
border-radius: .5rem;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-500);
text-decoration: none;
transition: background-color .2s, color .2s;
}
.bmup-dir__separador:hover { color: var(--bmup-cinza-800); }
.bmup-dir__separador--activo,
.bmup-dir__separador--activo:hover {
background: var(--bmup-branco);
color: var(--bmup-cinza-900);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.bmup-dir__conta {
padding: .125rem .375rem;
border-radius: 9999px;
background: var(--bmup-cobre);
color: var(--bmup-branco);
font-size: .75rem;
}
/* --- barra de pesquisa e filtros --- */
.bmup-dir__barra {
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
/* A linha de cima da barra: a pesquisa a ocupar o que sobra, e à direita o
botão dos Filtros e a troca grelha/lista (DashboardDirectory.tsx:207). */
.bmup-dir__linha {
display: flex;
flex-direction: column;
gap: .75rem;
}
.bmup-dir__procura {
display: flex;
flex: 1;
min-width: 0;
}
.bmup-dir__campo {
position: relative;
flex: 1;
}
.bmup-dir__campo svg {
position: absolute;
left: .875rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: var(--bmup-cinza-400);
pointer-events: none;
}
.bmup-dir__campo input {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: .625rem 1rem .625rem 2.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-cinza-50);
font: inherit;
font-size: .875rem;
color: var(--bmup-cinza-900);
outline: none;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.bmup-dir__campo input:focus {
border-color: var(--bmup-cobre);
background: var(--bmup-branco);
box-shadow: 0 0 0 3px rgba(172, 116, 80, .3);
}
.bmup-dir__botoes {
display: flex;
align-items: center;
gap: .5rem;
}
.bmup-dir__campo input::-webkit-search-cancel-button { cursor: pointer; }
/* "Filtros" — contorno claro fechado, preto aberto */
.bmup-dir__filtrar {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .625rem 1rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-branco);
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-600);
text-decoration: none;
white-space: nowrap;
transition: background-color .2s, border-color .2s, color .2s;
}
.bmup-dir__filtrar:hover { background: var(--bmup-cinza-50); }
.bmup-dir__filtrar svg { width: .9375rem; height: .9375rem; }
.bmup-dir__filtrar.is-aberto,
.bmup-dir__filtrar.is-aberto:hover {
border-color: var(--bmup-preto);
background: var(--bmup-preto);
color: var(--bmup-branco);
}
/* Quantos filtros estão escolhidos, para se saber com o painel fechado */
.bmup-dir__filtrar-conta {
min-width: 1.125rem;
padding: 0 .3rem;
border-radius: 9999px;
background: var(--bmup-cobre);
color: var(--bmup-branco);
font-size: .6875rem;
line-height: 1.125rem;
text-align: center;
}
/* Grelha / lista */
.bmup-dir__vistas {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .25rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-cinza-50);
}
.bmup-dir__vista {
display: inline-flex;
padding: .5rem;
border-radius: .5rem;
color: var(--bmup-cinza-400);
transition: background-color .2s, color .2s, box-shadow .2s;
}
.bmup-dir__vista:hover { color: var(--bmup-cinza-700); }
.bmup-dir__vista svg { width: .9375rem; height: .9375rem; }
.bmup-dir__vista.is-activa,
.bmup-dir__vista.is-activa:hover {
background: var(--bmup-branco);
color: var(--bmup-cinza-900);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.bmup-dir__submeter {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .625rem 1rem;
border: 1px solid var(--bmup-preto);
border-radius: .75rem;
background: var(--bmup-preto);
color: var(--bmup-branco);
font: inherit;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
cursor: pointer;
transition: background-color .2s;
}
.bmup-dir__submeter:hover { background: var(--bmup-cobre); border-color: var(--bmup-cobre); }
.bmup-dir__submeter svg { width: .9375rem; height: .9375rem; }
.bmup-dir__filtros {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--bmup-cinza-100);
}
.bmup-dir__filtros[hidden] { display: none; }
.bmup-dir__grupo + .bmup-dir__grupo { margin-top: 1rem; }
.bmup-dir__grupo p {
margin: 0 0 .625rem;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-500);
}
.bmup-dir__pilulas {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.bmup-dir__pilula {
padding: .375rem .875rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 9999px;
background: var(--bmup-branco);
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-600);
text-decoration: none;
transition: border-color .2s, background-color .2s, color .2s;
}
.bmup-dir__pilula:hover { border-color: var(--bmup-cinza-300); }
.bmup-dir__pilula--activa,
.bmup-dir__pilula--activa:hover {
border-color: var(--bmup-cobre);
background: var(--bmup-cobre);
color: var(--bmup-branco);
}
/* A localização escolhida é a preto — no desenho a categoria é cobre e a
localização preta, para não se confundirem as duas linhas. */
.bmup-dir__pilula--local.bmup-dir__pilula--activa,
.bmup-dir__pilula--local.bmup-dir__pilula--activa:hover {
border-color: var(--bmup-preto);
background: var(--bmup-preto);
}
.bmup-dir__limpar {
display: inline-flex;
align-items: center;
gap: .375rem;
margin-top: 1rem;
font-size: .75rem;
font-weight: var(--bmup-peso-medio);
color: #ef4444;
text-decoration: none;
}
.bmup-dir__limpar:hover { color: #b91c1c; }
.bmup-dir__limpar svg { width: .8125rem; height: .8125rem; }
/* --- cabeçalho dos resultados --- */
.bmup-dir__resultados {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: .875rem;
color: var(--bmup-cinza-500);
}
.bmup-dir__resultados { flex-wrap: wrap; }
/* Numa linha só; no telemóvel é o Ordenar que desce, não o texto que parte. */
.bmup-dir__resultados p { margin: 0; white-space: nowrap; }
.bmup-dir__resultados b { font-weight: var(--bmup-peso-forte); color: var(--bmup-cinza-900); }
.bmup-dir__ordenar {
display: flex;
align-items: center;
gap: .5rem;
}
.bmup-dir__ordenar label { color: var(--bmup-cinza-400); }
.bmup-dir__ordenar-caixa { position: relative; display: inline-flex; }
.bmup-dir__ordenar-caixa svg {
position: absolute;
right: .625rem;
top: 50%;
width: .8125rem;
height: .8125rem;
transform: translateY(-50%) rotate(90deg);
color: var(--bmup-cinza-400);
pointer-events: none;
}
.bmup-dir__ordenar-ok {
padding: .375rem .75rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .5rem;
background: var(--bmup-branco);
font: inherit;
font-size: .875rem;
cursor: pointer;
}
.bmup-dir__ordenar select {
-webkit-appearance: none;
appearance: none;
min-width: 12.75rem;
padding: .375rem 2rem .375rem .75rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .5rem;
background: var(--bmup-branco);
font: inherit;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-700);
cursor: pointer;
outline: none;
}
.bmup-dir__ordenar select:focus { border-color: var(--bmup-cobre); }
/* --- grelha --- */
.bmup-dir__grelha {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.bmup-dir__vazio {
padding: 4rem 2rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
text-align: center;
color: var(--bmup-cinza-500);
}
/* O ícone solto (Os Meus Anúncios vazio, Anúncio não encontrado) — como era
antes de 2026-09-24. O Diretório usa a caixa .bmup-dir__vazio-icone. */
.bmup-dir__vazio > svg {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 1rem;
color: var(--bmup-cinza-300);
}
.bmup-dir__vazio-icone + p { margin: 0; font-weight: var(--bmup-peso-medio); }
.bmup-dir__vazio-icone {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin: 0 auto 1rem;
border-radius: 1rem;
background: var(--bmup-cinza-100);
color: var(--bmup-cinza-400);
}
.bmup-dir__vazio-icone svg { width: 1.375rem; height: 1.375rem; }
.bmup-dir__vazio-limpar {
display: inline-block;
margin-top: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cobre);
text-decoration: none;
}
.bmup-dir__vazio-limpar:hover { color: var(--bmup-cobre-escuro, #8a5d40); }
/* --- paginação (DashboardDirectory.tsx:369) --- */
.bmup-dir__paginas {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin-top: 1.5rem;
padding-top: 1rem;
}
.bmup-dir__pagina {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-700);
text-decoration: none;
transition: background-color .2s;
}
a.bmup-dir__pagina:hover { background: var(--bmup-cinza-50); }
.bmup-dir__pagina.is-actual {
border-color: var(--bmup-preto);
background: var(--bmup-preto);
color: var(--bmup-branco);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12);
}
.bmup-dir__pagina--seta { color: var(--bmup-cinza-500); }
.bmup-dir__pagina--seta svg { width: 1rem; height: 1rem; transform: rotate(180deg); }
.bmup-dir__pagina--seguinte svg { transform: none; }
.bmup-dir__pagina.is-desligada { opacity: .4; }
.bmup-dir__reticencias {
padding-inline: .25rem;
color: var(--bmup-cinza-300);
}
/* ==========================================================================
CARTÃO DE ANÚNCIO
========================================================================== */
.bmup-anuncio {
/* O relative e' para o link esticado do titulo: um ::after com inset: 0
cobre o cartao inteiro, para se clicar em qualquer sitio sem meter um
dentro de outro — o marcador de guardar ja e' um link, e links
aninhados sao HTML invalido. */
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
.bmup-anuncio:hover {
border-color: var(--bmup-cinza-300);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07);
}
.bmup-anuncio__foto {
position: relative;
height: 12rem;
overflow: hidden;
background: var(--bmup-cinza-100);
flex-shrink: 0;
}
.bmup-anuncio__foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.bmup-anuncio:hover .bmup-anuncio__foto img { transform: scale(1.05); }
/* O véu que escurece a fotografia por baixo ao passar o rato (bg-gradient-to-t
from-black/40, opacity-0 -> 100 no desenho). */
.bmup-anuncio__foto::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent);
opacity: 0;
transition: opacity .2s;
pointer-events: none;
}
.bmup-anuncio:hover .bmup-anuncio__foto::after { opacity: 1; }
/* Sem fotografia: o ícone ao centro em vez de um buraco branco. Enquanto os
anúncios vierem da semente, é o que se vê em todos. */
.bmup-anuncio__sem-foto {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--bmup-cinza-100);
color: var(--bmup-cinza-300);
}
.bmup-anuncio__sem-foto svg { width: 2.5rem; height: 2.5rem; }
.bmup-anuncio__selo {
position: absolute;
top: .75rem;
left: .75rem;
padding: .25rem .625rem;
border-radius: 9999px;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(4px);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
font-size: .75rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cinza-900);
}
.bmup-anuncio__marcador {
position: absolute;
/* Por cima do link esticado do titulo (z-index: 1), senao era impossivel
guardar: o clique caia sempre no cartao. */
z-index: 2;
top: .75rem;
right: .75rem;
display: inline-flex;
padding: .5rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: .75rem;
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(4px);
color: var(--bmup-cinza-600);
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.bmup-anuncio__marcador svg { width: .8125rem; height: .8125rem; }
.bmup-anuncio__marcador:hover { background: var(--bmup-branco); }
.bmup-anuncio__marcador--guardado,
.bmup-anuncio__marcador--guardado:hover {
border-color: var(--bmup-cobre);
background: var(--bmup-cobre);
color: var(--bmup-branco);
}
.bmup-anuncio__marcador--guardado svg { fill: currentColor; }
.bmup-anuncio__corpo {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.bmup-anuncio__cimo {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.bmup-anuncio__etiquetas {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: .375rem;
min-width: 0;
}
/* Arrendamento e Procura — a venda é o normal e não leva etiqueta */
.bmup-anuncio__tipo {
padding: .125rem .5rem;
border-radius: .375rem;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
}
.bmup-anuncio__tipo--arrendamento { background: #ecfdf5; color: #047857; }
.bmup-anuncio__tipo--procura { background: rgba(172, 116, 80, .12); color: #8a5d40; }
.bmup-anuncio__categoria {
padding: .125rem .5rem;
border-radius: .375rem;
background: var(--bmup-cinza-100);
font-size: .75rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-600);
}
.bmup-anuncio__vistas {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-anuncio__vistas svg { width: .625rem; height: .625rem; }
.bmup-anuncio__titulo {
margin: .5rem 0 .375rem;
font-family: var(--bmup-font-corpo);
font-size: 1rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .2s;
}
.bmup-anuncio:hover .bmup-anuncio__titulo { color: var(--bmup-cobre); }
.bmup-anuncio__local {
display: flex;
align-items: center;
gap: .25rem;
margin: 0 0 1rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-anuncio__local svg { width: .625rem; height: .625rem; flex-shrink: 0; }
.bmup-anuncio__rodape {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-top: auto;
padding-top: .75rem;
border-top: 1px solid var(--bmup-cinza-100);
}
.bmup-anuncio__preco {
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cobre);
}
.bmup-anuncio__ver {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-500);
transition: color .2s;
}
.bmup-anuncio__ver svg { width: .75rem; height: .75rem; }
.bmup-anuncio:hover .bmup-anuncio__ver { color: var(--bmup-cobre); }
/* Marca o anúncio que ainda não passou pela moderação. Só aparece em
Os Meus Anúncios — no Directório só entram os activos. */
.bmup-anuncio__estado {
padding: .125rem .5rem;
border-radius: .375rem;
background: #fef3c7;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
color: #92400e;
}
/* ==========================================================================
ECRÃS MAIORES
==========================================================================
O ponto de quebra é o mesmo do resto do site (768px). Acima dele a barra
lateral deixa de ser gaveta e passa a ocupar espaço na grelha.
========================================================================== */
@media (min-width: 768px) {
.bmup-membro__lateral {
position: sticky;
transform: none;
flex-shrink: 0;
}
.bmup-membro__cortina,
.bmup-membro__fechar,
.bmup-membro__abrir,
.bmup-membro__titulo-movel { display: none; }
.bmup-membro__migalhas,
.bmup-membro__conta-texto { display: block; }
.bmup-membro__migalhas { display: flex; }
.bmup-membro__topo { padding-inline: 2rem; }
.bmup-membro__corpo { padding: 2rem; }
.bmup-dir__cabecalho {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.bmup-dir__contador { align-self: auto; }
.bmup-dir__linha { flex-direction: row; align-items: center; }
}
/* Colunas como no desenho: 2 a partir do sm (640px), 3 a partir do xl
(1280px). Com a barra lateral, 3 colunas a 1024px davam cartões de 210px. */
@media (min-width: 640px) {
.bmup-dir__grelha { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.bmup-membro__pesquisa { display: block; }
}
@media (min-width: 1280px) {
.bmup-dir__grelha { grid-template-columns: repeat(3, 1fr); }
}
/* No Diretório o título do cartão é o h3 do desenho: 18px (medido). Só aqui
— os cartões das outras páginas ficam como estão. */
.bmup-dir__grelha .bmup-anuncio__titulo { font-size: 1.125rem; }
/* --- vista em lista (DashboardDirectory.tsx:27) ---
O mesmo cartão, deitado: a fotografia à esquerda, e no corpo o título e o
local primeiro, a categoria e as visualizações a seguir. */
.bmup-dir__grelha.bmup-dir__grelha--lista {
grid-template-columns: 1fr;
gap: 1rem;
}
.bmup-dir__grelha--lista .bmup-anuncio { flex-direction: row; }
.bmup-dir__grelha--lista .bmup-anuncio__foto {
width: 7rem;
height: auto;
min-height: 10rem;
}
.bmup-dir__grelha--lista .bmup-anuncio__foto img { position: absolute; inset: 0; }
/* Na fotografia estreita da lista o marcador tapava a etiqueta ("Exclusivo"):
desce para o canto de baixo. */
.bmup-dir__grelha--lista .bmup-anuncio__marcador { top: auto; bottom: .5rem; right: .5rem; }
.bmup-dir__grelha--lista .bmup-anuncio__corpo { min-width: 0; padding: .75rem; }
.bmup-dir__grelha--lista .bmup-anuncio__titulo { order: 1; margin: 0 0 .25rem; padding-right: .5rem; font-size: .875rem; }
.bmup-dir__grelha--lista .bmup-anuncio__local { order: 2; margin-bottom: .75rem; }
.bmup-dir__grelha--lista .bmup-anuncio__cimo { order: 3; justify-content: flex-start; gap: .75rem; }
.bmup-dir__grelha--lista .bmup-anuncio__rodape { order: 4; margin-top: 1rem; padding-top: 1rem; }
@media (min-width: 640px) {
.bmup-dir__grelha--lista .bmup-anuncio__titulo { font-size: 1rem; }
.bmup-dir__grelha--lista .bmup-anuncio__foto { width: 12rem; }
.bmup-dir__grelha--lista .bmup-anuncio__corpo { padding: 1.25rem; }
}
@media (min-width: 1280px) {
.bmup-dir__grelha.bmup-dir__grelha--lista { grid-template-columns: 1fr; }
}
/* ==========================================================================
VISÃO GERAL
==========================================================================
Menos blocos do que o desenho, de propósito: só os que têm dados. A razão
está no cabeçalho do views/Utilizadores/membro-painel.tpl.
========================================================================== */
.bmup-painel__boas-vindas {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1.5rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-painel__boas-vindas h2 {
margin: 0 0 .5rem;
font-family: var(--bmup-font-titulo);
font-size: 1.5rem;
font-weight: var(--bmup-peso-forte);
letter-spacing: -.02em;
color: var(--bmup-cinza-900);
}
.bmup-painel__boas-vindas p {
margin: 0;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
}
.bmup-painel__accao {
align-self: flex-start;
padding: .625rem 1.5rem;
border-radius: .75rem;
background: var(--bmup-preto-botao);
color: var(--bmup-branco);
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
text-decoration: none;
transition: background-color .2s;
}
.bmup-painel__accao:hover { background: var(--bmup-cobre); }
.bmup-painel__indicadores {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.bmup-painel__cartao {
display: block;
padding: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1.5rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
text-decoration: none;
transition: box-shadow .2s, transform .2s;
}
a.bmup-painel__cartao:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07);
transform: translateY(-3px);
}
.bmup-painel__cartao--parado { cursor: default; }
.bmup-painel__icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
border-radius: 1rem;
}
.bmup-painel__icone svg { width: 1.375rem; height: 1.375rem; }
.bmup-painel__icone--escuro { background: var(--bmup-preto); color: var(--bmup-branco); }
.bmup-painel__icone--cobre { background: rgba(172, 116, 80, .1); color: var(--bmup-cobre); }
.bmup-painel__icone--claro { background: var(--bmup-cinza-100); color: var(--bmup-cinza-600); }
.bmup-painel__cartao strong {
display: block;
font-size: 1.875rem;
font-weight: var(--bmup-peso-forte);
letter-spacing: -.02em;
color: var(--bmup-cinza-900);
}
/* O nome do plano é texto, não um número: não leva o mesmo corpo. */
.bmup-painel__plano { font-size: 1.25rem !important; }
.bmup-painel__legenda {
display: block;
margin-top: .25rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
}
.bmup-painel__meus {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1.5rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-painel__meus .bmup-painel__icone { margin-bottom: 0; flex-shrink: 0; }
.bmup-painel__meus h3 {
margin: 0 0 .25rem;
font-family: var(--bmup-font-corpo);
font-size: 1rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
.bmup-painel__meus p { margin: 0; font-size: .875rem; color: var(--bmup-cinza-500); }
.bmup-painel__breve {
margin-left: auto;
padding: .25rem .625rem;
border-radius: 9999px;
background: var(--bmup-cinza-100);
font-size: .6875rem;
font-style: normal;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bmup-cinza-500);
}
@media (min-width: 768px) {
.bmup-painel__boas-vindas {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 2rem;
}
.bmup-painel__accao { align-self: auto; }
.bmup-painel__indicadores { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
DETALHE DO ANÚNCIO
==========================================================================
Corresponde ao DirectoryDetail.tsx.
========================================================================== */
.bmup-anuncio__titulo a {
color: inherit;
text-decoration: none;
}
.bmup-anuncio__titulo a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.bmup-detalhe__voltar {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-bottom: 1.5rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
text-decoration: none;
transition: color .2s;
}
.bmup-detalhe__voltar:hover { color: var(--bmup-cinza-900); }
.bmup-detalhe__voltar svg { width: 1rem; height: 1rem; transition: transform .2s; }
.bmup-detalhe__voltar:hover svg { transform: translateX(-2px); }
/* --- galeria --- */
.bmup-detalhe__galeria {
display: grid;
grid-template-columns: 1fr;
/* A linha fica com a altura da galeria, e nem um píxel mais. Sem isto as
três miniaturas (221px cada) esticavam a linha para 680px: a fotografia
principal crescia com ela e a galeria cortava-a em baixo — via-se só o
cimo da fotografia, e só duas miniaturas (2026-09-24). Assim o cover
centra cada fotografia na sua caixa. */
grid-template-rows: minmax(0, 1fr);
gap: .5rem;
height: 20rem;
margin-bottom: 1.5rem;
border-radius: 1rem;
overflow: hidden;
}
.bmup-detalhe__principal {
position: relative;
overflow: hidden;
background: var(--bmup-cinza-100);
}
.bmup-detalhe__principal img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bmup-detalhe__miniaturas {
display: none;
flex-direction: column;
gap: .5rem;
min-height: 0;
}
/* --- a galeria a mexer (2026-09-24, DirectoryDetail.tsx:80) --- */
.bmup-detalhe__ampliar {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
}
.bmup-detalhe__ampliar img { transition: transform .5s; }
.bmup-detalhe__principal:hover .bmup-detalhe__ampliar img { transform: scale(1.05); }
.bmup-detalhe__seta {
position: absolute;
top: 50%;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(4px);
color: var(--bmup-branco);
cursor: pointer;
opacity: 0;
transform: translateY(-50%);
transition: opacity .2s, background-color .2s;
}
.bmup-detalhe__seta svg { width: 1.125rem; height: 1.125rem; }
.bmup-detalhe__seta--antes { left: .75rem; }
.bmup-detalhe__seta--antes svg { transform: rotate(180deg); }
.bmup-detalhe__seta--depois { right: .75rem; }
.bmup-detalhe__seta:hover { background: rgba(0, 0, 0, .7); }
/* Aparecem ao passar o rato; com o teclado, quando se chega lá; num ecrã
de toque (sem hover) ficam sempre à vista. */
.bmup-detalhe__principal:hover .bmup-detalhe__seta,
.bmup-detalhe__seta:focus-visible { opacity: 1; }
@media (hover: none) {
.bmup-detalhe__seta { opacity: 1; }
}
.bmup-detalhe__pontos {
position: absolute;
bottom: .75rem;
left: 50%;
z-index: 1;
display: flex;
gap: .375rem;
transform: translateX(-50%);
pointer-events: none;
}
.bmup-detalhe__ponto {
width: .375rem;
height: .375rem;
border-radius: 9999px;
background: rgba(255, 255, 255, .4);
transition: width .2s, background-color .2s;
}
.bmup-detalhe__ponto.is-actual { width: 1.5rem; background: var(--bmup-branco); }
.bmup-detalhe__principal .bmup-anuncio__selo { top: 1rem; left: 1rem; z-index: 1; pointer-events: none; }
.bmup-detalhe__foto-mini {
position: relative;
display: block;
flex: 1 1 0;
min-height: 0;
overflow: hidden;
border-radius: .25rem;
opacity: .8;
transition: opacity .2s;
}
.bmup-detalhe__foto-mini:hover { opacity: 1; }
/* A que está na grande: anel cobre, como o ring-2 do desenho */
.bmup-detalhe__foto-mini.is-actual {
opacity: 1;
outline: 2px solid var(--bmup-cobre);
outline-offset: -2px;
}
.bmup-detalhe__foto-mini img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bmup-detalhe__mais {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
color: var(--bmup-branco);
font-size: .875rem;
font-weight: var(--bmup-peso-forte);
}
/* --- ecrã inteiro --- */
.bmup-ecra {
width: 100vw;
max-width: none;
height: 100vh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: rgba(10, 10, 10, .96);
color: var(--bmup-branco);
}
.bmup-ecra::backdrop { background: rgba(0, 0, 0, .6); }
.bmup-ecra[open] { display: flex; align-items: center; justify-content: center; }
.bmup-ecra__foto {
max-width: calc(100vw - 8rem);
max-height: calc(100vh - 7rem);
object-fit: contain;
border-radius: .5rem;
user-select: none;
}
.bmup-ecra__botao {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: var(--bmup-branco);
cursor: pointer;
transition: background-color .2s;
}
.bmup-ecra__botao:hover { background: rgba(255, 255, 255, .22); }
.bmup-ecra__botao svg { width: 1.25rem; height: 1.25rem; }
.bmup-ecra__fechar { top: 1.25rem; right: 1.25rem; }
.bmup-ecra__antes { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.bmup-ecra__antes svg { transform: rotate(180deg); }
.bmup-ecra__depois { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.bmup-ecra__conta {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
font-size: .875rem;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .7);
}
@media (max-width: 639px) {
.bmup-ecra__foto { max-width: 100vw; max-height: calc(100vh - 8rem); border-radius: 0; }
.bmup-ecra__antes, .bmup-ecra__depois { top: auto; bottom: 1rem; transform: none; }
}
.bmup-detalhe__miniaturas img {
flex: 1 1 0;
object-position: center;
width: 100%;
min-height: 0;
border-radius: .25rem;
object-fit: cover;
}
/* --- estrutura --- */
.bmup-detalhe__grelha {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding-bottom: 2rem;
}
.bmup-detalhe__coluna,
.bmup-detalhe__lado {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.bmup-detalhe__caixa {
padding: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-detalhe__caixa h2 {
margin: 0 0 1rem;
font-family: var(--bmup-font-corpo);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-900);
}
/* --- cabeçalho --- */
.bmup-detalhe__cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.bmup-detalhe__etiquetas {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: .75rem;
}
.bmup-detalhe__titulo {
margin: 0;
font-family: var(--bmup-font-titulo);
font-size: 1.5rem;
font-weight: var(--bmup-peso-forte);
letter-spacing: -.02em;
color: var(--bmup-cinza-900);
}
.bmup-detalhe__local {
display: flex;
align-items: center;
gap: .375rem;
margin: .5rem 0 0;
font-size: .875rem;
color: var(--bmup-cinza-500);
}
.bmup-detalhe__local svg { width: .875rem; height: .875rem; color: var(--bmup-cinza-400); }
.bmup-detalhe__marcador {
display: inline-flex;
padding: .625rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
color: var(--bmup-cinza-500);
transition: border-color .2s, background-color .2s, color .2s;
}
.bmup-detalhe__marcador svg { width: 1.0625rem; height: 1.0625rem; }
.bmup-detalhe__marcador:hover { border-color: var(--bmup-cobre); color: var(--bmup-cobre); }
.bmup-detalhe__marcador--guardado,
.bmup-detalhe__marcador--guardado:hover {
border-color: var(--bmup-cobre);
background: var(--bmup-cobre);
color: var(--bmup-branco);
}
.bmup-detalhe__marcador--guardado svg { fill: currentColor; }
.bmup-detalhe__texto {
margin: 0;
line-height: 1.75;
color: var(--bmup-cinza-600);
}
/* --- pontos fortes --- */
.bmup-detalhe__destaques { margin: 0; padding: 0; list-style: none; }
.bmup-detalhe__destaques li {
display: flex;
align-items: flex-start;
gap: .75rem;
font-size: .875rem;
color: var(--bmup-cinza-700);
}
.bmup-detalhe__destaques li + li { margin-top: .75rem; }
.bmup-detalhe__visto {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-top: .125rem;
border-radius: 50%;
background: rgba(172, 116, 80, .1);
color: var(--bmup-cobre);
flex-shrink: 0;
}
.bmup-detalhe__visto svg { width: .6875rem; height: .6875rem; stroke-width: 3; }
/* --- ficha técnica --- */
.bmup-detalhe__ficha {
display: grid;
grid-template-columns: 1fr;
margin: 0;
}
.bmup-detalhe__ficha > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem .5rem;
border-radius: .5rem;
}
.bmup-detalhe__ficha > div:hover { background: var(--bmup-cinza-50); }
.bmup-detalhe__ficha dt { font-size: .875rem; color: var(--bmup-cinza-400); }
.bmup-detalhe__ficha dd {
margin: 0;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
text-align: right;
}
/* --- semelhantes --- */
.bmup-detalhe__semelhantes {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.bmup-detalhe__semelhantes a {
display: flex;
min-width: 0;
gap: 1rem;
padding: .75rem;
border: 1px solid var(--bmup-cinza-100);
border-radius: .75rem;
text-decoration: none;
transition: border-color .2s, background-color .2s;
}
.bmup-detalhe__semelhantes a:hover {
border-color: var(--bmup-cinza-200);
background: var(--bmup-cinza-50);
}
.bmup-detalhe__miniatura {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: .5rem;
overflow: hidden;
background: var(--bmup-cinza-100);
color: var(--bmup-cinza-300);
flex-shrink: 0;
}
.bmup-detalhe__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.bmup-detalhe__miniatura svg { width: 1.25rem; height: 1.25rem; }
.bmup-detalhe__semelhante-texto { min-width: 0; }
.bmup-detalhe__semelhante-texto b {
display: block;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bmup-detalhe__semelhante-texto em {
display: flex;
align-items: center;
gap: .25rem;
margin-top: .125rem;
font-size: .75rem;
font-style: normal;
color: var(--bmup-cinza-400);
}
.bmup-detalhe__semelhante-texto em svg { width: .625rem; height: .625rem; flex-shrink: 0; }
.bmup-detalhe__semelhante-texto strong {
display: block;
margin-top: .25rem;
font-size: .875rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cobre);
}
/* --- coluna do lado --- */
.bmup-detalhe__preco-rotulo {
margin: 0 0 .25rem;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-400);
}
.bmup-detalhe__preco {
margin: 0 0 1.25rem;
font-size: 1.875rem;
font-weight: var(--bmup-peso-forte);
letter-spacing: -.02em;
color: var(--bmup-cinza-900);
}
.bmup-detalhe__pedir,
.bmup-detalhe__favorito {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .75rem;
border-radius: .75rem;
font-size: .875rem;
text-decoration: none;
transition: background-color .2s, border-color .2s, color .2s;
}
.bmup-detalhe__pedir {
background: var(--bmup-preto);
color: var(--bmup-branco);
font-weight: var(--bmup-peso-semi);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05);
}
.bmup-detalhe__pedir:hover { background: var(--bmup-cobre); }
.bmup-detalhe__favorito {
margin-top: .625rem;
border: 1px solid var(--bmup-cinza-200);
color: var(--bmup-cinza-700);
font-weight: var(--bmup-peso-medio);
}
.bmup-detalhe__favorito:hover { background: var(--bmup-cinza-50); }
.bmup-detalhe__favorito--guardado {
border-color: var(--bmup-cobre);
color: var(--bmup-cobre);
}
.bmup-detalhe__favorito--guardado svg { fill: currentColor; }
.bmup-detalhe__pedir svg,
.bmup-detalhe__favorito svg { width: 1rem; height: 1rem; }
.bmup-detalhe__factos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
.bmup-detalhe__factos > div {
padding: .75rem;
border-radius: .75rem;
background: var(--bmup-cinza-50);
}
.bmup-detalhe__factos p {
margin: 0 0 .25rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-detalhe__factos b {
font-size: .875rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cinza-900);
}
.bmup-detalhe__activo {
display: flex;
align-items: center;
gap: .25rem;
color: #16a34a;
}
.bmup-detalhe__activo::before {
content: '';
width: .375rem;
height: .375rem;
border-radius: 50%;
background: #22c55e;
}
.bmup-detalhe__vendedor > div {
display: flex;
align-items: center;
gap: .75rem;
}
.bmup-detalhe__vendedor b {
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
/* A caixa de vazio serve as duas páginas: "nada encontrado" no Directório e
"anúncio não encontrado" no detalhe. Só esta leva título. */
.bmup-dir__vazio h2 {
margin: 0 0 .5rem;
font-family: var(--bmup-font-corpo);
font-size: 1.25rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cinza-900);
}
@media (min-width: 768px) {
.bmup-detalhe__galeria {
/* minmax(0, ...): sem isto a fotografia grande (1600px, dentro do
link) impunha a sua largura e as miniaturas ficavam com 64px. */
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
height: 24rem;
}
.bmup-detalhe__miniaturas { display: flex; }
.bmup-detalhe__ficha { grid-template-columns: repeat(2, 1fr); }
.bmup-detalhe__ficha > div:nth-child(odd) { padding-right: 1.5rem; }
.bmup-detalhe__ficha > div:nth-child(even) {
padding-left: 1.5rem;
border-left: 1px solid var(--bmup-cinza-100);
}
/* minmax(0, ...): com 1fr cada coluna não encolhia abaixo do título mais
comprido (que não quebra linha) e a segunda saía da caixa (2026-10-08). */
.bmup-detalhe__semelhantes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.bmup-detalhe__grelha { grid-template-columns: 2fr 1fr; }
}
/* A coluna do preço acompanha o scroll — a decisão de contactar toma-se a
ler a ficha técnica, que fica bem mais abaixo.
A COLUNA TODA, não só o cartão do preço (como no desenho): sozinho, o
cartão passava por cima dos factos e do anunciante, que continuavam a
deslizar por baixo dele. Só em ecrãs altos o bastante para a coluna
caber inteira — senão o fundo dela (o anunciante) nunca se via. E por
baixo do topo da área de membro, que também é sticky (5rem): com só
1.5rem ficava cortada por trás dele. */
@media (min-width: 1024px) and (min-height: 820px) { /* um investimento tem mais 2 factos (ROI, Prazo): ~690px de coluna */
.bmup-detalhe__lado {
position: sticky;
top: calc(var(--membro-topo) + 1.5rem);
align-self: start;
}
}
/* ==========================================================================
OS MEUS ANÚNCIOS
==========================================================================
Corresponde ao MyAds.tsx.
========================================================================== */
.bmup-meus__criar {
display: inline-flex;
align-items: center;
gap: .5rem;
align-self: flex-start;
padding: .625rem 1.25rem;
border-radius: .75rem;
background: var(--bmup-preto-botao);
color: var(--bmup-branco);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
text-decoration: none;
transition: background-color .2s;
}
.bmup-meus__criar:hover { background: var(--bmup-cobre); }
.bmup-meus__criar svg { width: 1.125rem; height: 1.125rem; }
/* --- avisos --- */
.bmup-meus__aviso {
display: block;
padding: .875rem 1.25rem;
margin: 0 0 1.5rem;
border: 1px solid rgba(34, 197, 94, .3);
border-radius: .75rem;
background: #f0fdf4;
font-size: .875rem;
color: #15803d;
}
.bmup-meus__aviso--atencao {
border-color: rgba(245, 158, 11, .35);
background: #fffbeb;
color: #92400e;
}
.bmup-meus__aviso--erro {
border-color: rgba(239, 68, 68, .3);
background: #fef2f2;
color: #b91c1c;
}
/* os links dentro de um aviso (2026-10-16 — o do limite de pedidos): da cor
do aviso, sublinhados, para se verem como links */
.bmup-meus__aviso a { color: inherit; font-weight: var(--bmup-peso-semi); text-decoration: underline; text-underline-offset: 2px; }
.bmup-meus__aviso a:hover { text-decoration-thickness: 2px; }
.bmup-meus__plano {
margin: 0 0 1.5rem;
font-size: .875rem;
color: var(--bmup-cinza-500);
}
.bmup-meus__plano b { font-weight: var(--bmup-peso-semi); color: var(--bmup-cinza-900); }
.bmup-meus__cheio {
display: block;
margin-top: .25rem;
font-weight: var(--bmup-peso-medio);
color: #b45309;
}
/* --- tabela --- */
.bmup-meus__caixa {
overflow-x: auto; /* a tabela tem seis colunas; no telemóvel arrasta-se */
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-meus__tabela {
width: 100%;
min-width: 44rem;
border-collapse: collapse;
font-size: .875rem;
text-align: left;
color: var(--bmup-cinza-600);
}
.bmup-meus__tabela thead {
background: var(--bmup-cinza-50);
color: var(--bmup-cinza-500);
}
.bmup-meus__tabela th {
padding: 1rem 1.5rem;
font-weight: var(--bmup-peso-medio);
white-space: nowrap;
}
.bmup-meus__tabela td {
padding: 1rem 1.5rem;
border-top: 1px solid var(--bmup-cinza-100);
vertical-align: middle;
}
.bmup-meus__tabela tbody tr:hover { background: rgba(250, 250, 250, .6); }
.bmup-meus__tabela td b {
display: block;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
.bmup-meus__tabela td em {
display: block;
margin-top: .125rem;
font-size: .75rem;
font-style: normal;
color: var(--bmup-cinza-400);
}
.bmup-meus__discreto { font-size: .75rem; color: var(--bmup-cinza-500); }
.bmup-meus__centro { text-align: center; }
.bmup-meus__direita { text-align: right; }
.bmup-meus__estado {
display: inline-block;
padding: .25rem .75rem;
border-radius: 9999px;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
.bmup-meus__estado--activo { background: #dcfce7; color: #15803d; }
.bmup-meus__estado--pendente { background: #fef3c7; color: #b45309; }
.bmup-meus__estado--inactivo { background: var(--bmup-cinza-100); color: var(--bmup-cinza-500); }
/* Em espera pelo limite do plano: laranja, para não se confundir nem com o
âmbar do pendente nem com o cinzento do inactivo. */
.bmup-meus__estado--espera { background: #ffedd5; color: #c2410c; }
/* O aviso do limite, com a lista dos que ficaram em espera. */
.bmup-meus__espera ul {
margin: .5rem 0;
padding-left: 1.25rem;
}
.bmup-meus__espera li { line-height: 1.7; }
.bmup-meus__espera a {
color: inherit;
font-weight: var(--bmup-peso-medio);
text-decoration: underline;
}
.bmup-meus__accoes {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: .25rem;
}
.bmup-meus__accoes a,
.bmup-meus__accoes button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--bmup-cinza-200);
border-radius: .5rem;
background: var(--bmup-branco);
color: var(--bmup-cinza-500);
cursor: pointer;
transition: border-color .2s, color .2s, background-color .2s;
}
.bmup-meus__accoes a:hover,
.bmup-meus__accoes button:hover {
border-color: var(--bmup-cobre);
color: var(--bmup-cobre);
}
.bmup-meus__accoes button:hover {
border-color: #ef4444;
background: #fef2f2;
color: #b91c1c;
}
.bmup-meus__accoes svg { width: .875rem; height: .875rem; }
.bmup-meus__apagar { display: inline-flex; margin: 0; }
/* ==========================================================================
FORMULÁRIO DO ANÚNCIO
========================================================================== */
.bmup-forma {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-bottom: 2rem;
}
.bmup-forma fieldset {
border: 1px solid var(--bmup-cinza-200);
margin: 0;
}
.bmup-forma legend {
padding: 0 .5rem;
margin-left: -.5rem;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-900);
}
.bmup-forma__campo { margin-top: 1.25rem; }
.bmup-forma__campo label,
.bmup-forma__rotulo {
display: block;
margin-bottom: .375rem;
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bmup-cinza-500);
}
.bmup-forma__campo input[type="text"],
.bmup-forma__campo input[type="email"],
.bmup-forma__campo input[type="tel"],
.bmup-forma__campo input[type="date"],
.bmup-forma__campo input[type="password"],
.bmup-forma__campo select,
.bmup-forma__campo textarea {
display: block;
width: 100%;
padding: .625rem .875rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-branco);
font: inherit;
font-size: .875rem;
color: var(--bmup-cinza-900);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.bmup-forma__campo textarea { resize: vertical; line-height: 1.6; }
/* Só de leitura (o email do Perfil, 2026-10-08): vê-se que não se escreve. */
.bmup-forma__campo input[readonly] {
background: var(--bmup-cinza-50);
color: var(--bmup-cinza-500);
cursor: default;
}
.bmup-forma__campo input[readonly]:focus {
border-color: var(--bmup-cinza-200);
box-shadow: none;
}
.bmup-forma__campo input[type="text"]:focus,
.bmup-forma__campo input[type="email"]:focus,
.bmup-forma__campo input[type="tel"]:focus,
.bmup-forma__campo input[type="date"]:focus,
.bmup-forma__campo input[type="password"]:focus,
.bmup-forma__campo select:focus,
.bmup-forma__campo textarea:focus {
border-color: var(--bmup-cobre);
box-shadow: 0 0 0 3px rgba(172, 116, 80, .2);
}
.bmup-forma__par {
display: grid;
grid-template-columns: 1fr;
gap: 0 1.25rem;
}
/* O tipo de negócio: três botões de rádio que se lêem como pastilhas. O rádio
fica escondido mas continua lá — é ele que dá a navegação por teclado e o
agrupamento por nome. */
.bmup-forma__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* --- destaques e especificações no formulário do anúncio --- */
.bmup-forma__intro {
margin: 0 0 1rem;
font-size: .8125rem;
color: var(--bmup-cinza-500);
}
.bmup-forma__linhas { display: grid; gap: .5rem; }
.bmup-forma__campo--linha { margin: 0; }
.bmup-forma__pares { display: grid; gap: .5rem; }
.bmup-forma__par-titulos,
.bmup-forma__par-linha {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: .5rem;
}
.bmup-forma__par-titulos span {
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bmup-cinza-500);
}
/* Os campos dos pares com o mesmo aspecto dos outros do formulário */
.bmup-forma__par-linha input {
width: 100%;
padding: .625rem .875rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-branco);
font: inherit;
font-size: .875rem;
color: var(--bmup-cinza-900);
outline: none;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.bmup-forma__par-linha input:focus {
border-color: var(--bmup-cobre);
background: var(--bmup-branco);
box-shadow: 0 0 0 3px rgba(172, 116, 80, .2);
}
.bmup-forma__mais {
display: inline-flex;
align-items: center;
gap: .375rem;
margin-top: .75rem;
padding: .5rem .875rem;
border: 1px dashed var(--bmup-cinza-300);
border-radius: .75rem;
background: none;
font: inherit;
font-size: .8125rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-600);
cursor: pointer;
transition: border-color .2s, color .2s;
}
.bmup-forma__mais:hover { border-color: var(--bmup-cobre); color: var(--bmup-cobre); }
.bmup-forma__mais svg { width: .875rem; height: .875rem; }
.bmup-forma__mais[hidden] { display: none; }
/* Caixa simples de marcar ("Preço sob consulta") */
.bmup-forma__marca {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: .625rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-700);
cursor: pointer;
}
/* O rotulo dos campos e' em maiusculas pequenas; esta caixa e' uma frase. */
.bmup-forma__campo label.bmup-forma__marca {
display: inline-flex;
margin-bottom: 0;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
letter-spacing: normal;
text-transform: none;
color: var(--bmup-cinza-700);
}
.bmup-forma__marca input {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--bmup-cobre);
cursor: pointer;
}
.bmup-forma__campo input:disabled {
background: var(--bmup-cinza-100);
color: var(--bmup-cinza-400);
cursor: not-allowed;
}
.bmup-forma__ajuda[hidden] { display: none; }
.bmup-forma__opcao input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.bmup-forma__opcao span {
display: inline-block;
padding: .5rem 1rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-600);
cursor: pointer;
transition: border-color .2s, background-color .2s, color .2s;
}
.bmup-forma__opcao span:hover { border-color: var(--bmup-cinza-300); }
.bmup-forma__opcao input:checked + span {
border-color: var(--bmup-cobre);
background: var(--bmup-cobre);
color: var(--bmup-branco);
}
/* O anel de foco tem de aparecer no , já que o está escondido —
senão quem navega por teclado não vê onde está. */
.bmup-forma__opcao input:focus-visible + span {
box-shadow: 0 0 0 3px rgba(172, 116, 80, .35);
}
.bmup-forma__ajuda,
.bmup-forma__erro {
display: block;
margin-top: .375rem;
font-size: .75rem;
font-style: normal;
}
.bmup-forma__ajuda { color: var(--bmup-cinza-400); }
.bmup-forma__erro { font-weight: var(--bmup-peso-medio); color: #b91c1c; }
.bmup-forma__nota {
display: flex;
align-items: center;
gap: .625rem;
padding: .875rem 1rem;
margin: 1.25rem 0 0;
border: 1px dashed var(--bmup-cinza-300);
border-radius: .75rem;
font-size: .8125rem;
color: var(--bmup-cinza-500);
}
.bmup-forma__nota svg {
width: 1.125rem;
height: 1.125rem;
color: var(--bmup-cinza-400);
flex-shrink: 0;
}
.bmup-forma__accoes {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .75rem;
}
.bmup-forma__accoes .bmup-detalhe__pedir {
width: auto;
padding-inline: 1.75rem;
border: 0;
font: inherit;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
cursor: pointer;
}
.bmup-forma__cancelar {
padding: .75rem 1.25rem;
border-radius: .75rem;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-500);
text-decoration: none;
}
.bmup-forma__cancelar:hover { background: var(--bmup-cinza-100); color: var(--bmup-cinza-900); }
@media (min-width: 768px) {
.bmup-forma__par { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
FOTOGRAFIAS DO ANÚNCIO
==========================================================================
A zona de carregamento no formulário de editar. No desenho é uma área de
arrastar ficheiros; aqui é um normal, que funciona em
todo o lado — incluindo no telemóvel, onde abre a câmara e a galeria.
========================================================================== */
.bmup-fotos { margin-bottom: 2rem; }
.bmup-fotos__grelha {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
gap: .75rem;
margin-bottom: 1rem;
}
.bmup-fotos__uma {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--bmup-cinza-200);
border-radius: .75rem;
background: var(--bmup-cinza-100);
}
.bmup-fotos__uma img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bmup-fotos__capa {
position: absolute;
left: .5rem;
bottom: .5rem;
padding: .125rem .5rem;
border-radius: 9999px;
background: var(--bmup-cobre);
color: var(--bmup-branco);
font-size: .6875rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .04em;
}
.bmup-fotos__uma form { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.bmup-fotos__uma button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 0;
border-radius: .5rem;
background: rgba(10, 10, 10, .55);
backdrop-filter: blur(4px);
color: var(--bmup-branco);
cursor: pointer;
transition: background-color .2s;
}
.bmup-fotos__uma button:hover { background: #b91c1c; }
.bmup-fotos__uma button svg { width: .75rem; height: .75rem; }
.bmup-fotos__nota {
margin: 0 0 1.25rem;
font-size: .8125rem;
color: var(--bmup-cinza-500);
}
.bmup-fotos__enviar {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--bmup-cinza-100);
}
.bmup-fotos__enviar .bmup-forma__campo { margin-top: 0; }
.bmup-fotos__enviar .bmup-detalhe__pedir {
align-self: flex-start;
width: auto;
padding-inline: 1.75rem;
border: 0;
font: inherit;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
cursor: pointer;
}
/* ==========================================================================
PERFIL & DEFINIÇÕES
==========================================================================
Corresponde ao Profile.tsx: coluna estreita (um terço) à esquerda com o
cartão do membro, os contactos e o cartão do plano; coluna larga à direita
com os formulários. Em ecrã pequeno empilha, a estreita primeiro.
NOMES: tudo debaixo de .bmup-perfil__ — ver a nota de colisões no cimo do
ficheiro. Os campos reutilizam .bmup-forma__campo / __par / __accoes.
========================================================================== */
.bmup-perfil {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
padding-bottom: 2rem;
}
.bmup-perfil__lado,
.bmup-perfil__principal {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
}
/* --- os cartões da coluna estreita --- */
.bmup-perfil__cartao {
padding: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-perfil__cartao--membro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* O anel de cobre à volta da fotografia, como na barra lateral mas maior
(w-28 no desenho): gradiente de 4px por baixo de um círculo branco. */
.bmup-perfil__avatar {
width: 7rem;
height: 7rem;
padding: 4px;
margin-bottom: 1rem;
border-radius: 50%;
background: linear-gradient(to top right, var(--bmup-cobre), var(--bmup-cobre-claro));
}
.bmup-perfil__avatar span,
.bmup-perfil__avatar img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 4px solid var(--bmup-branco);
border-radius: 50%;
background: var(--bmup-preto);
color: var(--bmup-cobre-claro);
font-size: 1.75rem;
font-weight: var(--bmup-peso-semi);
object-fit: cover;
}
.bmup-perfil__nome {
margin: 0;
font-family: var(--bmup-font-corpo);
font-size: 1.25rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cinza-900);
}
.bmup-perfil__desde {
margin: .25rem 0 1rem;
font-size: .875rem;
color: var(--bmup-cinza-500);
}
.bmup-perfil__nivel {
display: inline-block;
padding: .375rem 1rem;
border: 1px solid rgba(172, 116, 80, .2);
border-radius: 9999px;
background: rgba(172, 116, 80, .1);
font-size: .75rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cobre);
}
.bmup-perfil__nivel--sem {
border-color: var(--bmup-cinza-200);
background: var(--bmup-cinza-100);
color: var(--bmup-cinza-500);
}
/* --- carregar a fotografia (um ) --- */
.bmup-perfil__foto {
width: 100%;
margin-top: 1.25rem;
text-align: left;
}
.bmup-perfil__foto summary {
display: inline-flex;
align-items: center;
gap: .375rem;
margin: 0 auto;
font-size: .8125rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cobre);
cursor: pointer;
list-style: none;
}
.bmup-perfil__foto summary::-webkit-details-marker { display: none; }
.bmup-perfil__foto summary svg { width: 1rem; height: 1rem; }
.bmup-perfil__foto summary:hover { color: var(--bmup-cobre-escuro); }
.bmup-perfil__foto[open] summary { color: var(--bmup-cinza-500); }
.bmup-forma__accoes--esq { justify-content: flex-start; margin-top: 1rem; }
.bmup-perfil__remover {
display: inline-flex;
align-items: center;
gap: .375rem;
margin-top: .75rem;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: .8125rem;
color: var(--bmup-cinza-500);
cursor: pointer;
}
.bmup-perfil__remover svg { width: .875rem; height: .875rem; }
.bmup-perfil__remover:hover { color: #b91c1c; }
/* --- contactos --- */
.bmup-perfil__rotulo {
margin: 0 0 1rem;
font-family: var(--bmup-font-corpo);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cinza-900);
}
.bmup-perfil__contactos {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.bmup-perfil__contactos li {
display: flex;
align-items: center;
gap: .75rem;
min-width: 0;
}
.bmup-perfil__contacto-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--bmup-cinza-50);
color: var(--bmup-cinza-500);
flex-shrink: 0;
}
.bmup-perfil__contacto-icone svg { width: 1.125rem; height: 1.125rem; }
.bmup-perfil__contacto-texto { min-width: 0; }
.bmup-perfil__contacto-texto small {
display: block;
font-size: .75rem;
color: var(--bmup-cinza-500);
}
.bmup-perfil__contacto-texto strong {
display: block;
overflow: hidden;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-900);
text-overflow: ellipsis;
white-space: nowrap;
}
.bmup-perfil__vazio { font-weight: var(--bmup-peso-normal) !important; color: var(--bmup-cinza-400) !important; font-style: italic; }
/* --- o cartão do plano: escuro, como o desenho --- */
.bmup-perfil__cartao--plano {
border: 0;
background: linear-gradient(to bottom right, var(--bmup-preto), var(--bmup-cinza-800));
color: var(--bmup-branco);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.bmup-perfil__plano-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem;
}
.bmup-perfil__plano-nome {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bmup-cobre);
}
.bmup-perfil__plano-nome svg { width: 1.125rem; height: 1.125rem; }
.bmup-perfil__plano-chave {
padding: .25rem .625rem;
border-radius: 9999px;
background: var(--bmup-cinza-800);
font-size: .75rem;
text-transform: uppercase;
color: var(--bmup-cinza-400);
}
.bmup-perfil__plano-data {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 .25rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-perfil__plano-data svg { width: .75rem; height: .75rem; flex-shrink: 0; }
.bmup-perfil__plano-data--forte {
margin-bottom: 1.25rem;
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-300);
}
.bmup-perfil__plano-data--forte svg { width: .875rem; height: .875rem; color: var(--bmup-cobre); }
.bmup-perfil__barra-legenda {
display: flex;
justify-content: space-between;
margin-bottom: .375rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-perfil__barra {
height: .375rem;
margin-bottom: 1.25rem;
border-radius: 9999px;
background: var(--bmup-cinza-700);
overflow: hidden;
}
.bmup-perfil__barra span {
display: block;
height: 100%;
border-radius: 9999px;
background: linear-gradient(to right, var(--bmup-cobre), var(--bmup-cobre-claro));
}
.bmup-perfil__plano-renova {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 1.25rem;
font-size: .75rem;
color: var(--bmup-cinza-400);
}
.bmup-perfil__plano-renova svg { width: .75rem; height: .75rem; color: var(--bmup-cinza-500); }
.bmup-perfil__plano-renova--sim svg { color: var(--bmup-verde); }
/* O botão de renovar, apagado até a Fase 7 (mesma pastilha "em breve" da
barra lateral). */
.bmup-perfil__renovar {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .75rem;
border-radius: .75rem;
background: rgba(172, 116, 80, .35);
font-size: .875rem;
font-weight: var(--bmup-peso-semi);
color: rgba(255, 255, 255, .6);
cursor: not-allowed;
}
.bmup-perfil__renovar svg { width: .9375rem; height: .9375rem; }
.bmup-perfil__renovar .bmup-membro__breve { margin-left: .25rem; }
/* --- as caixas da coluna larga --- */
.bmup-perfil__forma {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bmup-perfil__caixa {
border: 1px solid var(--bmup-cinza-200);
border-radius: 1rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
overflow: hidden;
}
.bmup-perfil__caixa-topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid var(--bmup-cinza-100);
}
.bmup-perfil__caixa-topo h3 {
margin: 0;
font-family: var(--bmup-font-corpo);
font-size: 1.125rem;
font-weight: var(--bmup-peso-semi);
color: var(--bmup-cinza-900);
}
/* O primeiro campo da caixa não leva a margem de cima dos outros. */
.bmup-perfil__caixa-corpo { padding: .25rem 1.5rem 1.5rem; }
.bmup-perfil__caixa-corpo .bmup-forma__accoes { margin-top: 1.5rem; }
/* --- as linhas da Segurança (um cada) --- */
.bmup-perfil__linha summary {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
cursor: pointer;
list-style: none;
transition: background-color .2s;
}
.bmup-perfil__linha summary::-webkit-details-marker { display: none; }
.bmup-perfil__linha summary:hover { background: var(--bmup-cinza-50); }
.bmup-perfil__linha-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(172, 116, 80, .1);
color: var(--bmup-cobre);
flex-shrink: 0;
}
.bmup-perfil__linha-icone svg { width: 1.125rem; height: 1.125rem; }
.bmup-perfil__linha-texto { flex: 1; min-width: 0; }
.bmup-perfil__linha-texto strong {
display: block;
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-900);
}
.bmup-perfil__linha-texto small {
display: block;
margin-top: .125rem;
font-size: .75rem;
color: var(--bmup-cinza-500);
}
/* (0,2,0): o reset `.bmup svg { height: auto }` (0,1,1) ganhava a uma classe
sozinha e esticava a seta para 150px — a linha ficava com 198px de altura. */
.bmup-perfil__linha .bmup-perfil__linha-seta {
width: 1.125rem;
height: 1.125rem;
color: var(--bmup-cinza-400);
transition: transform .2s, color .2s;
}
.bmup-perfil__linha summary:hover .bmup-perfil__linha-seta { color: var(--bmup-cobre); }
.bmup-perfil__linha[open] .bmup-perfil__linha-seta { transform: rotate(90deg); }
/* Eliminar a conta (2026-10-06): o mesmo desenho das outras linhas, com o
ícone e o botão a vermelho — é a única acção da página que não se faz por
engano. */
.bmup-perfil__linha--perigo .bmup-perfil__linha-icone { background: rgba(185, 28, 28, .08); color: #b91c1c; }
.bmup-perfil__linha--perigo summary:hover .bmup-perfil__linha-seta { color: #b91c1c; }
.bmup-detalhe__pedir.bmup-perfil__eliminar { background: #b91c1c; }
.bmup-detalhe__pedir.bmup-perfil__eliminar:hover { background: #991b1b; }
.bmup-perfil__linha .bmup-perfil__forma {
gap: 0;
padding: 0 1.5rem 1.5rem;
border-top: 1px solid var(--bmup-cinza-100);
}
/* o botão afastado do último campo, como nas caixas (2026-10-15): com o
gap a 0 ficava colado ao select */
.bmup-perfil__linha .bmup-forma__accoes { margin-top: 1.5rem; }
@media (min-width: 768px) {
/* md:w-1/3 + md:w-2/3 no desenho */
.bmup-perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
/* ==========================================================================
SEM PLANO VÁLIDO — a Visão Geral e a barra lateral (2026-09-16)
==========================================================================
Quem ainda não pagou, ou deixou expirar, só vê a Visão Geral (com o estado
da conta) e o Perfil. As outras entradas da barra lateral ficam à vista e
trancadas. Ver Planos_Membro.
========================================================================== */
.bmup-painel__estado {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem;
border: 1px solid var(--bmup-cinza-200);
border-left: 4px solid var(--bmup-cobre);
border-radius: 1.5rem;
background: var(--bmup-branco);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bmup-painel__estado--expirada { border-left-color: #d97706; }
.bmup-painel__estado--nenhuma { border-left-color: var(--bmup-cinza-400); }
.bmup-painel__estado .bmup-painel__icone { margin-bottom: 0; flex-shrink: 0; }
.bmup-painel__estado h2 {
margin: 0 0 .5rem;
font-family: var(--bmup-font-corpo);
font-size: 1.5rem;
font-weight: var(--bmup-peso-forte);
color: var(--bmup-cinza-900);
}
.bmup-painel__estado p {
max-width: 40rem;
margin: 0;
font-size: .9375rem;
line-height: 1.6;
color: var(--bmup-cinza-600);
}
.bmup-painel__estado-accoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem 1.25rem;
margin-top: 1.25rem;
}
.bmup-painel__secundaria {
font-size: .875rem;
font-weight: var(--bmup-peso-medio);
color: var(--bmup-cinza-600);
text-decoration: underline;
text-underline-offset: 3px;
}
.bmup-painel__secundaria:hover { color: var(--bmup-cobre); }
/* A pastilha "após ativação" distingue-se da "em breve": não é o portal que
falta, é a conta que ainda não abriu. */
.bmup-membro__link--bloqueado .bmup-membro__breve {
background: rgba(172, 116, 80, .18);
color: var(--bmup-cobre-claro);
}
@media (min-width: 768px) {
.bmup-painel__estado { flex-direction: row; align-items: flex-start; padding: 2rem; }
}
/* ==========================================================================
CAMPO DE FICHEIRO — a zona tracejada do desenho (2026-09-16)
==========================================================================
MyAds.tsx:393: borda tracejada de 2px, fundo zinc-50, ícone de imagem,
"Clique para carregar imagens" e a nota dos formatos por baixo.
É um