/*
 * CSS comum dos dois sites (24/10/2026) — carregado por
 * `contas/templates/layout/_esqueleto.html` ANTES do CSS da tela, então a
 * tela pode ajustar o que quiser. A barra de topo mora SÓ aqui (e o ajuste de
 * celular em telas_celular.css): tela nova nunca recria `.topbar`.
 * Cores por variável: `--accent*` vêm do bloco `cores` do base do site.
 */
:root {
    --accent: #0f766e; --accent-dark: #0b5b54; --accent-light: #e6f4f2;
    --tinta: #222222; --tinta-suave: #6b6f76; --linha: #e8e8e8; --fundo: #f7f7f8;
}
html, body { margin: 0; }
body {
    background: var(--fundo); color: var(--tinta);
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ---- Barra de topo ---- */
.topbar {
    background: #fff; border-bottom: 1px solid var(--linha); box-sizing: border-box;
    padding: 14px 72px 14px 24px; /* direita: espaço da bolinha da conta (fixa) */
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topbar-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-titulo {
    font-size: 1.2rem; font-weight: 800; line-height: 1.25; margin: 0;
    color: var(--tinta); font-family: inherit; min-width: 0;
}
/* Sem título / sem ações (bloco vazio, ou só espaços): some, sem deixar linha vazia no celular. */
.topbar-titulo:empty, .topbar-acoes:not(:has(*)) { display: none !important; }
.topbar-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-acoes form { margin: 0; }
.marca-logo { height: 36px; max-width: 170px; width: auto; object-fit: contain; border-radius: 4px; }
.marca-separador { width: 1px; align-self: stretch; background: var(--linha); }
.marca-site {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    font-weight: 800; font-size: 1.1rem; color: var(--tinta); text-decoration: none;
}
.marca-site:hover { color: var(--tinta); }
.marca-site img { width: 26px; height: 26px; border-radius: 7px; }
.marca-site.imovu-logo svg { height: 28px; width: auto; display: block; }

/* ---- Abas na 2ª linha da barra (bloco `abas`): links `<a class="aba">`, a atual com `ativa` ---- */
.topbar-abas:not(:has(*)) { display: none; }
.topbar:has(> .topbar-abas a) { row-gap: 0; padding-bottom: 0; }
.topbar:has(> .topbar-abas a) > .topbar-marca { width: 100%; padding-bottom: 10px; }
.topbar-abas {
    display: flex; gap: 2px; width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-top: 1px solid var(--linha);
}
.topbar-abas::-webkit-scrollbar { display: none; }
.topbar-abas a.aba {
    white-space: nowrap; flex: 0 0 auto; border-bottom: 3px solid transparent; padding: 11px 12px 9px;
    color: var(--tinta-suave); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.topbar-abas a.aba:hover { color: var(--tinta); }
.topbar-abas a.aba.ativa { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 700; }
.topbar-abas a.aba i { margin-right: 4px; }

/* ---- Botões em pílula (barra e conteúdo) ---- */
.btn-pill {
    border: 1px solid var(--linha); border-radius: 24px; background: #fff; padding: 8px 18px;
    font-weight: 600; color: var(--tinta); text-decoration: none; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.5;
}
.btn-pill:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); color: var(--tinta); }
.btn-pill-accent, .btn-pill.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-pill-accent:hover, .btn-pill.btn-accent:hover { color: #fff; opacity: .92; }

/* Cartão centralizado abaixo da barra (entrar, cadastro, senha, avisos curtos). */
.centro-tela {
    min-height: calc(100vh - 66px); box-sizing: border-box; padding: 32px 12px 64px;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 640px) {
    .topbar:has(> .topbar-abas a) > .topbar-marca { padding-bottom: 8px; }
    .topbar-abas { flex: 0 0 calc(100% + 50px); width: calc(100% + 50px); } /* usa o espaço sob a bolinha da conta */
    .topbar-abas a.aba { padding: 10px 10px 8px; font-size: 0.86rem; }
    .marca-site { font-size: 1rem; }
    .marca-site.imovu-logo svg { height: 24px; }
}