/* =====================================================================
OASIS — CAMADA WEB (desktop)
assets/vf/oasis-web.css
COMO ESTA BIBLIOTECA FUNCIONA, E POR QUE ASSIM
Quase tudo aqui vive dentro de @media (min-width: 1024px). Abaixo
disso, nenhuma dessas regras existe — o aplicativo no celular continua
exatamente como está. A web ganha o desenho novo sem que o mobile seja
reescrito, e um conserto num não pode quebrar o outro.
O esqueleto de três colunas mora no `partials/topo.php` e
`partials/rodape.php`. Como TODA página do OASIS já passa por eles,
toda página herda o layout sem uma linha de alteração. A coluna do
meio é a única que muda de tela para tela.
.ow-shell a grade das três colunas
.ow-lado coluna da esquerda (navegação + plataformas)
.oa-pagina coluna do meio (o conteúdo da página, já existia)
.ow-direita coluna da direita (widgets)
Os componentes abaixo (.ow-card, .ow-nav, .ow-lista, .ow-stories,
.ow-tabs, .ow-banner) são de uso geral: a próxima tela monta com eles
em vez de inventar CSS próprio.
Nenhuma cor está escrita aqui — só variáveis do `oasis.css`. É o que
mantém as duas larguras iguais quando um token mudar.
===================================================================== */
/* =====================================================================
UTILITÁRIOS DE VISIBILIDADE — convenção do Bart (1.03.30)
A forma que ele já usa nos outros projetos, adotada aqui: em vez de
esconder bloco por bloco com regra própria (`.pfx-capa`, `.pfx-bio`,
`.pfw-topo`…), a intenção fica na MARCAÇÃO, onde quem lê o HTML
enxerga sem abrir o CSS.
O corte é o mesmo da camada web (1024px), e não 992/700: aqui ele não é
preferência, é onde a terceira coluna deixa de caber. Um corte só evita
a faixa morta em que um bloco já sumiu e o outro ainda não apareceu.
Vale para as duas famílias de tela, porque este arquivo é o único CSS
carregado nas duas.
===================================================================== */
/* No celular, o que é de desktop não existe. */
.hidden-mobile { display: none !important; }
@media (min-width: 1024px) {
/* Na web, o inverso — e o de desktop volta ao display natural dele.
`revert` e não `block`: um tem que voltar
a ser inline, e um flex tem que voltar a ser flex. */
.hidden-mobile { display: revert !important; }
.hidden-desktop { display: none !important; }
}
/*
* TOKENS DO OASIS TAMBÉM NAS TELAS HERDADAS DO VALE — 1.03.70.
*
* Esta folha usa as cores do `oasis.css` (azul, tintas, linhas, vermelho),
* mas as telas do esqueleto do Vale (vf-head: Eventos, Marketplace,
* Explorar, Vouchers…) não carregam o `oasis.css`. Sem as variáveis, o item
* aceso da navegação ficava preto em vez de azul e o número de mensagens
* do Marketplace ficava branco sobre nada, invisível. Os valores são os
* mesmos do `oasis.css`, então onde ele carrega nada muda.
*/
:root {
--oa-azul: var(--t-cor, #1D4ED8); --oa-ink: var(--t-tx, #0F172A); --oa-ink-2: var(--t-tx2, #334155); --oa-ink-4: var(--t-tx4, #94A3B8);
--oa-line: var(--t-linha, #E2E8F0); --oa-line-soft: var(--t-linha, #F1F5F9); --oa-vermelho: #DC2626;
}
/* No celular, o que é exclusivo da web não existe. Sem isto, o topo e as
colunas apareceriam empilhados dentro do aplicativo. */
.ow-topo, .ow-lado, .ow-direita { display: none; }
@media (min-width: 1024px) {
/* ── Tokens da camada web ─────────────────────────────────── */
:root {
--ow-lado-w: 220px; /* coluna esquerda (1.03.89: a do perfil, em todas as telas) */
--ow-direita-w: 360px; /* coluna direita */
--ow-meio-max: 795px; /* teto do feed */
--ow-gap: 24px;
--ow-topo-h: 64px;
--ow-raio: 14px;
--ow-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}
body { background: var(--t-sup3, #F0F2F5); }
/*
* O SUBLINHADO EM TUDO (corrigido na 1.03.25).
*
* Era isto que fazia a "linha embaixo de tudo" no Explorar: as 7 telas
* herdadas do ValeFidelidade carregam o `vf.css` e o Bootstrap, e lá o
* padrão do `` é sublinhado. O `oasis.css` do OASIS já zera isso, mas
* ele NÃO é carregado naquelas telas — então a navegação, os chips, o
* "Ver loja" e os widgets apareciam todos sublinhados.
*
* Zerado no escopo da camada web, que é onde a marcação é nossa. Não
* mexe no sublinhado de link dentro de texto corrido.
*/
.ow-topo a, .ow-shell a,
.ow-nav a, .ow-plat, .ow-chip, .ow-acao, .ow-filtro,
.ow-lista__item, .ow-lista__txt, .ow-card__mais, .ow-btn-claro,
.exp-subtab, .ow-story { text-decoration: none !important; }
.ow-topo a:hover, .ow-nav a:hover, .ow-card__mais:hover { text-decoration: none !important; }
/* ── O ESQUELETO ──────────────────────────────────────────── */
/*
* Grade de três colunas com a do meio elástica. As laterais são
* `position: sticky` e rolam por dentro: o feed pode ter 200 posts e a
* navegação continua na tela.
*/
.ow-shell {
display: grid;
grid-template-columns: var(--ow-lado-w) minmax(0, 1fr) var(--ow-direita-w);
gap: var(--ow-gap);
align-items: start;
/* Sem teto de largura: a grade ocupa o monitor inteiro. */
margin: 0 auto;
/* Sem padding à esquerda: a coluna da esquerda encosta na borda (1.03.89). */
padding: var(--ow-gap) 20px 40px 0;
}
/* 1.03.66 — tela sem coluna da direita ($owDireita = 'nenhuma'). */
.ow-shell--sem-direita {
grid-template-columns: var(--ow-lado-w) minmax(0, 1fr);
}
.ow-lado, .ow-direita {
display: block;
position: sticky;
top: calc(var(--ow-topo-h) + var(--ow-gap));
max-height: calc(100vh - var(--ow-topo-h) - var(--ow-gap) * 2);
overflow-y: auto;
overscroll-behavior: contain;
/*
* A BARRA DE ROLAGEM SÓ APARECE COM O MOUSE NA COLUNA (1.03.27).
*
* `scrollbar-gutter: stable` reserva o espaço dela o tempo todo — sem
* isso o conteúdo daria um pulo de alguns pixels toda vez que a barra
* aparecesse e sumisse, e o efeito ficaria nervoso.
*
* `scrollbar-width` (Firefox) e `::-webkit-scrollbar` (Chrome, Edge,
* Safari) fazem a mesma coisa por caminhos diferentes: os dois estão
* aqui porque nenhum sozinho cobre todos os navegadores.
*/
scrollbar-gutter: stable;
scrollbar-width: none;
}
.ow-lado::-webkit-scrollbar,
.ow-direita::-webkit-scrollbar { width: 8px; }
.ow-lado::-webkit-scrollbar-thumb,
.ow-direita::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.ow-lado:hover, .ow-direita:hover { scrollbar-width: thin; }
.ow-lado:hover::-webkit-scrollbar-thumb,
.ow-direita:hover::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .22); }
.ow-lado:hover::-webkit-scrollbar-thumb:hover,
.ow-direita:hover::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .38); }
/* A coluna do meio é a `.oa-pagina` do mobile. Aqui ela só perde o
padding de celular e ganha um teto de largura. */
.oa-pagina {
max-width: var(--ow-meio-max);
width: 100%;
margin: 0 auto;
padding: 0 !important;
min-height: auto;
}
/* ── TOPO ─────────────────────────────────────────────────── */
.ow-topo {
position: sticky; top: 0; z-index: 70;
height: var(--ow-topo-h);
display: flex; align-items: center; gap: 18px;
padding: 0 20px;
background: var(--t-sup, #fff);
border-bottom: 1px solid var(--oa-line-soft);
}
.ow-topo__marca { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ow-topo__marca img { width: 34px; height: 34px; border-radius: 9px; }
.ow-topo__marca b { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: var(--oa-ink); }
/* A busca: centralizada e com teto, como no desenho. `flex: 1` com
`max-width` em vez de largura fixa, para acompanhar a janela. */
.ow-busca {
flex: 1; min-width: 0; max-width: 620px; margin: 0 auto;
display: flex; align-items: center; gap: 10px;
height: 40px; padding: 0 14px;
background: var(--t-sup3, #F0F2F5); border: 1px solid transparent; border-radius: 999px;
color: var(--oa-ink-4);
transition: background .15s, border-color .15s;
}
.ow-busca:focus-within { background: var(--t-sup, #fff); border-color: var(--oa-azul); }
.ow-busca input {
flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
font: inherit; font-size: 14px; color: var(--oa-ink);
}
.ow-busca kbd {
flex: 0 0 auto;
font: inherit; font-size: 11px; font-weight: 600; color: var(--oa-ink-4);
padding: 2px 6px; border: 1px solid var(--oa-line); border-radius: 6px; background: var(--t-sup, #fff);
}
.ow-topo__dir { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ow-icone {
position: relative;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
color: var(--oa-ink-2); background: var(--t-sup3, #F0F2F5);
border: 0; cursor: pointer; /* 1.03.88: sem a borda padrão do botão */
}
.ow-icone:hover { background: var(--t-sup4, #E4E6EB); }
.ow-icone__ponto {
position: absolute; top: 8px; right: 8px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--oa-vermelho); border: 2px solid var(--t-sup, #fff);
}
.ow-eu {
display: flex; align-items: center; gap: 9px; background: transparent; /* 1.03.92: sem o fundo padrão do botão (no escuro ficava cinza) */
padding: 5px 12px 5px 5px; border-radius: 999px;
border: 1px solid var(--oa-line);
color: var(--oa-ink); font-size: 14px; font-weight: 600;
}
.ow-eu:hover { background: var(--t-sup3, #F0F2F5); }
/* 1.03.88 — Início e "+ Criar". */
.ow-icone--casa { color: var(--oa-ink-2); }
.ow-criar { position: relative; flex: 0 0 auto; margin: 0 4px 0 6px; }
.ow-criar__bt {
display: flex; align-items: center; gap: 7px;
height: 40px; padding: 0 18px 0 14px; border-radius: 12px;
border: 0; cursor: pointer;
background: var(--t-cor, #3B3BF5); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700;
box-shadow: 0 4px 12px var(--t-sombra, rgba(59, 59, 245, .25));
transition: background .15s, transform .15s;
}
.ow-criar__bt:hover { background: var(--t-cor, #2E2EDB); }
.ow-criar__bt:active { transform: translateY(1px); }
.ow-criar__bt[aria-expanded="true"] { background: var(--t-cor, #2626C4); }
/* 1.03.90 — a ação direta da tela (ex.: "+ Publicar vaga" em Trabalhos). */
a.ow-criar__bt--direto { flex: 0 0 auto; margin: 0 4px 0 6px; color: #fff !important; }
.ow-criar__menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
width: 272px; padding: 6px;
background: var(--t-sup, #fff); border: 1px solid var(--oa-line-soft); border-radius: 14px;
box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
display: grid; gap: 1px;
}
.ow-criar__menu[hidden] { display: none !important; }
.ow-criar__menu a {
display: flex; align-items: center; gap: 11px; min-width: 0;
padding: 8px 10px; border-radius: 10px; color: var(--oa-ink);
}
.ow-criar__menu a:hover, .ow-criar__menu a:focus-visible { background: var(--t-sup2, #F3F4FF); outline: none; }
.ow-criar__ic {
flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center; background: var(--t-50, #EEF0FF); color: var(--t-cor-tx, #3B3BF5);
}
.ow-criar__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ow-criar__txt b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-criar__txt small { display: block; font-size: 12px; color: var(--oa-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1279px) {
.ow-criar__bt { padding: 0 12px; }
.ow-criar__bt span { display: none; }
}
/*
* O AVATAR DO TOPO, PADRÃO EM TODAS AS PÁGINAS (1.03.27).
*
* Ele saía QUADRADO nas 7 telas herdadas do ValeFidelidade e redondo nas
* outras 20. A razão: o arredondamento do `.oa-avatar` mora no
* `oasis.css`, que não é carregado naquelas telas. Como o topo é o mesmo
* arquivo para as duas famílias, a regra tinha que morar na camada web —
* que é o único CSS carregado nas duas.
*
* `!important` porque o `vf.css` das telas do Vale tem regra própria de
* avatar e ganharia por especificidade.
*/
.ow-eu .oa-avatar,
.ow-eu img.oa-avatar {
width: 30px !important;
height: 30px !important;
min-width: 30px;
border-radius: 50% !important;
object-fit: cover;
font-size: 12px;
display: grid;
place-items: center;
overflow: hidden;
background: var(--t-50, #E7EDFF);
color: var(--oa-azul);
font-weight: 800;
}
/* ── CARTÃO: a base de todos os blocos ────────────────────── */
.ow-card {
background: var(--t-sup, #fff);
border: 1px solid var(--oa-line-soft);
border-radius: var(--ow-raio);
box-shadow: var(--ow-sombra);
}
.ow-card + .ow-card { margin-top: 16px; }
.ow-card__corpo { padding: 16px; }
.ow-card__topo {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px 10px;
}
.ow-card__topo h3 {
flex: 1; min-width: 0;
font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--oa-ink);
}
.ow-card__mais { font-size: 13px; font-weight: 600; color: var(--oa-azul); flex: 0 0 auto; }
/* ── NAVEGAÇÃO DA ESQUERDA ────────────────────────────────── */
.ow-nav { display: flex; flex-direction: column; gap: 2px; }
.ow-nav a {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: 10px;
font-size: 14.5px; font-weight: 600; color: var(--oa-ink-2);
}
.ow-nav a:hover { background: var(--t-sup4, #E7E9EC); }
.ow-nav a.is-on { background: var(--t-50, #E7EDFF); color: var(--oa-azul); font-weight: 700; }
.ow-nav a svg { flex: 0 0 auto; }
/*
* A COLUNA DA ESQUERDA É UMA SÓ EM TODAS AS TELAS — 1.03.89.
*
* Cada tela tinha calibrado a sua (268, 250, 229, 210 e 180 px, letra de
* 13 a 14,5 px, itens de 36 a 46 px), e ao trocar de tela o menu pulava.
* O padrão é o do perfil novo: 220 px, presa embaixo do topo e de cima a
* baixo, fundo claro com a linha à direita, itens de 40 px e letra de
* 13,5 px. Ela fica FIXA na tela; na grade, a primeira coluna só guarda o
* lugar dela, então o padding de cada tela não mexe mais no menu.
*
* O seletor com `.ow-shell >` é de propósito mais forte que o
* `.ow-shell--x .ow-nav a` das telas: nenhuma folha de tela muda o menu.
*/
/* A mesma letra em todas as telas: as herdadas do Vale usam DM Sans no
miolo, mas o topo e o menu são os do OASIS. */
.ow-topo, .ow-shell > .ow-lado { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ow-shell > .ow-lado {
position: fixed; z-index: 20; left: 0; top: var(--ow-topo-h); bottom: 0;
width: var(--ow-lado-w); max-height: none; margin: 0;
display: flex; flex-direction: column;
padding: 14px 13px 20px 15px;
background: var(--t-sup2, #FCFDFE); border-right: 1px solid var(--t-linha, #ECEFF4);
}
/* Com o player aberto, o menu termina em cima dele (o último item alcança). */
html.mu-tem-player .ow-shell > .ow-lado { bottom: 72px; }
.ow-shell > .ow-lado > * { flex: 0 0 auto; }
/* A grade põe o meio e a direita no lugar certo (o menu saiu do fluxo). */
.ow-shell > .oa-pagina { grid-column: 2; grid-row: 1; }
.ow-shell > .ow-direita { grid-column: 3; grid-row: 1; }
.ow-shell > .ow-lado .ow-nav { gap: 1.5px; }
.ow-shell > .ow-lado .ow-nav > a {
height: auto; gap: 13px; padding: 9.5px 12px 9.5px 18px; border-radius: 12px;
font-size: 13.5px; line-height: 21px; font-weight: 500; letter-spacing: 0; color: var(--t-tx2, #283054);
}
.ow-shell > .ow-lado .ow-nav > a svg { width: 21px; height: 21px; color: var(--t-tx2, #283054); }
.ow-shell > .ow-lado .ow-nav > a:hover:not(.is-on) { background: var(--t-sup3, #F1F3F9); }
.ow-shell > .ow-lado .ow-nav > a.is-on { background: var(--t-50, #ECEEFE); color: var(--t-cor-tx, #3538CD); font-weight: 600; }
.ow-shell > .ow-lado .ow-nav > a.is-on svg { color: var(--t-cor-tx, #3538CD); }
.ow-shell > .ow-lado .ow-nav > a > span:first-of-type { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-shell > .ow-lado .ow-nav .ow-nav__sub a { padding: 7px 12px 7px 52px; font-size: 13px; line-height: 19px; }
.ow-shell > .ow-lado .ow-nav .ow-nav__sub a::before { left: 28px; }
/* "SUAS PLATAFORMAS Gerenciar" numa linha só, dentro dos 220 px. */
.ow-shell > .ow-lado .ow-lado__titulo {
display: flex; gap: 5px; white-space: nowrap; padding: 18px 2px 8px 12px; font-size: 11px; letter-spacing: .3px;
}
.ow-shell > .ow-lado .ow-lado__titulo a { font-size: 11px; }
/* Item cuja tela ainda não existe: aparece, apagado, e sem link. Melhor
do que um link que leva a lugar nenhum. */
.ow-nav__breve {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: 10px;
font-size: 14.5px; font-weight: 500; color: var(--t-tx3, #6B7385);
cursor: default;
}
.ow-nav__breve > span { flex: 1; min-width: 0; }
.ow-nav__breve em {
margin-left: auto; flex: 0 0 auto;
padding: 3px 8px; border-radius: 6px; background: var(--t-sup3, #E9ECF1);
font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--t-tx3, #6B7385);
text-transform: uppercase; letter-spacing: .2px;
}
/* 1.03.70 — os caminhos da seção Eventos, abaixo do item. */
.ow-nav__sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px; }
.ow-nav .ow-nav__sub a {
position: relative; gap: 8px; padding: 7px 12px 7px 45px; border-radius: 8px;
font-size: 13.5px; font-weight: 500; color: var(--oa-ink-2);
}
.ow-nav .ow-nav__sub a > span:first-child { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-nav .ow-nav__sub a::before {
content: ''; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
border-radius: 50%; background: #CBD5E1;
}
.ow-nav .ow-nav__sub a.is-on { background: transparent; color: var(--oa-azul); font-weight: 700; }
.ow-nav .ow-nav__sub a.is-on::before { background: var(--oa-azul); }
.ow-nav .ow-nav__sub a:hover { background: var(--t-sup4, #E7E9EC); }
/* 1.03.69 — bloco "em breve" separado da navegação por um divisor. */
.ow-nav--breve {
margin: 12px 0 0; padding: 12px 0 0;
border-top: 1px solid var(--t-linha, #E3E6EB);
}
.ow-nav--breve + .ow-lado__titulo {
margin-top: 12px; border-top: 1px solid var(--t-linha, #E3E6EB); color: var(--oa-ink);
}
.ow-nav__conta {
margin-left: auto; flex: 0 0 auto;
min-width: 20px; height: 20px; padding: 0 6px;
display: grid; place-items: center;
background: var(--oa-vermelho); color: #fff;
border-radius: 999px; font-size: 11px; font-weight: 800;
}
.ow-lado__titulo {
display: flex; align-items: center; gap: 8px;
padding: 18px 12px 8px;
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--oa-ink-4);
}
.ow-lado__titulo a {
margin-left: auto; font-size: 12px; font-weight: 600;
color: var(--oa-azul); text-transform: none; letter-spacing: 0;
}
/* Plataformas: a mesma lista da home mobile, em formato de linha. */
.ow-plats { display: flex; flex-direction: column; gap: 2px; }
.ow-plat {
display: flex; align-items: center; gap: 11px;
padding: 8px 12px; border-radius: 10px;
}
.ow-plat:hover { background: var(--t-sup4, #E7E9EC); }
/*
* `display: block` NOS DOIS (corrigido na 1.03.25).
*
* São `` dentro de ``. Span é inline: sem isto o nome e a
* descrição saem na MESMA linha, emendados — "Drive ID Corridas e
* entregas". O mesmo motivo do bug que quebrou o topo na 1.03.10.
*/
.ow-plat__txt { flex: 1; min-width: 0; display: block; }
.ow-plat__t { display: block; font-size: 14px; font-weight: 700; color: var(--oa-ink); line-height: 1.2; }
.ow-plat__s {
display: block;
font-size: 11.5px; color: var(--oa-ink-4); line-height: 1.25; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 1.03.76 — o cartão "Grandes conquistas" no pé da navegação, para a
tela que declara `$GLOBALS['owLadoPromo'] = true` (Minha agenda). */
.ow-lado__promo {
position: relative; overflow: hidden; flex: 0 0 auto;
margin: 24px 0 0; padding: 20px 16px 19px 18px; border-radius: 13px;
background-color: #2D3E6B; background-size: cover; background-position: 74% 50%;
color: #fff;
}
.ow-lado__promo::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, var(--t-sombra, rgba(46, 74, 200, .34)) 0%, var(--t-anel, rgba(20, 26, 80, .12)) 55%, rgba(4, 8, 30, .5) 100%);
}
.ow-lado__promo > * { position: relative; }
.ow-lado__promo p { margin: 0; font-size: 14.5px; line-height: 21.5px; font-weight: 600; letter-spacing: -.3px; color: #fff; }
.ow-lado__promo a {
display: inline-flex; align-items: center; gap: 17px;
height: 36px; margin-top: 23px; padding: 0 17px 0 16px; border-radius: 999px;
border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06);
color: #fff !important; font-size: 13.5px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap;
}
.ow-lado__promo a:hover { background: rgba(255, 255, 255, .18); }
/* ── STORIES ──────────────────────────────────────────────── */
.ow-stories {
display: flex; gap: 8px; overflow-x: auto;
padding-bottom: 4px; scrollbar-width: none;
}
.ow-stories::-webkit-scrollbar { display: none; }
.ow-story {
position: relative; flex: 0 0 auto;
width: 104px; height: 168px; border-radius: var(--ow-raio);
overflow: hidden; background: var(--t-sup4, #E7E9EC);
box-shadow: var(--ow-sombra);
}
.ow-story img.ow-story__foto {
width: 100%; height: 100%; object-fit: cover;
transition: transform .25s;
}
.ow-story:hover img.ow-story__foto { transform: scale(1.04); }
/* Degradê para o nome nunca sumir numa foto clara. */
.ow-story::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
.ow-story__nome {
position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: block;
font-size: 11.5px; font-weight: 700; color: #fff; line-height: 1.2;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-story__avatar {
position: absolute; z-index: 2; top: 8px; left: 8px;
width: 32px; height: 32px; border-radius: 50%;
border: 3px solid var(--oa-azul); background: var(--t-sup, #fff); object-fit: cover;
}
/* ── ABAS DO FEED ─────────────────────────────────────────── */
.ow-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid var(--oa-line-soft);
padding: 0 4px;
}
.ow-tabs a {
position: relative;
padding: 13px 14px;
font-size: 14px; font-weight: 600; color: var(--oa-ink-4);
}
.ow-tabs a:hover { color: var(--oa-ink-2); }
.ow-tabs a.is-on { color: var(--oa-azul); font-weight: 700; }
.ow-tabs a.is-on::after {
content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px;
height: 3px; border-radius: 3px 3px 0 0; background: var(--oa-azul);
}
/* ── WIDGETS DA DIREITA ───────────────────────────────────── */
.ow-banner {
position: relative; overflow: hidden;
border-radius: var(--ow-raio); padding: 20px;
background: linear-gradient(135deg, #1E2A4A, #2D3E6B 55%, #4A5FA8);
color: #fff;
}
.ow-banner h3 { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; }
.ow-banner hr {
width: 34px; height: 3px; border: 0; border-radius: 2px;
background: rgba(255,255,255,.55); margin: 12px 0 16px;
}
.ow-btn-claro {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 15px; border-radius: 999px;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
color: #fff; font-size: 13px; font-weight: 700;
backdrop-filter: blur(4px);
}
.ow-btn-claro:hover { background: rgba(255,255,255,.26); }
.ow-lista { display: flex; flex-direction: column; padding-bottom: 6px; }
.ow-lista__item {
display: flex; align-items: center; gap: 11px;
padding: 9px 16px;
}
.ow-lista__item:hover { background: var(--t-sup2, #F7F8FA); }
/* Mesma razão do `.ow-plat__t`: span inline emenda as duas linhas. */
.ow-lista__txt { flex: 1; min-width: 0; display: block; }
.ow-lista__t {
display: block;
font-size: 13.5px; font-weight: 700; color: var(--oa-ink); line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-lista__s { display: block; font-size: 11.5px; color: var(--oa-ink-4); margin-top: 1px; }
.ow-lista__fim { margin-left: auto; flex: 0 0 auto; }
.ow-btn-seguir {
padding: 7px 14px; border-radius: 8px;
background: var(--t-50, #E7EDFF); color: var(--oa-azul);
font-size: 12.5px; font-weight: 700;
border: 0; cursor: pointer;
}
.ow-btn-seguir:hover { background: var(--t-100, #D6E0FF); }
.ow-btn-seguir[disabled] { opacity: .5; cursor: default; }
.ow-vazio { padding: 14px 16px 18px; font-size: 12.5px; color: var(--oa-ink-4); line-height: 1.5; }
/* ── O QUE O MOBILE MOSTRA E A WEB NÃO ────────────────────── */
/*
* Estes blocos existem na coluna do meio no celular. Na web a mesma
* informação está na lateral — mostrar duas vezes seria ruído. Somem por
* CSS, sem tocar no PHP das telas: é o que mantém UMA marcação para as
* duas larguras.
*/
.oa-topo { display: none !important; } /* topo do mobile */
.oa-abas { display: none !important; } /* barra inferior */
.hm-plats { display: none !important; } /* plataformas → vão para a lateral */
/* O TÍTULO da seção também sai. A 1.03.21 escondeu a lista e deixou o
cabeçalho "Suas plataformas" sozinho, com o "Ver todas" ao lado e o
compositor logo abaixo — parecia que a lista tinha sumido por erro.
Duas regras: a classe (certa) e o :has (rede de segurança para o HTML
que ainda não tiver a classe). */
.hm-sec--plats { display: none !important; }
.hm-sec:has(+ .hm-plats) { display: none !important; }
.hm-frase { display: none !important; } /* frase da marca → vai para o banner */
/*
* A SAUDAÇÃO SAI NA WEB (1.03.27).
*
* "Olá, gabriel" com a data é uma abertura de aplicativo de celular, onde
* a tela é a primeira coisa do dia. No computador o nome já está no topo,
* à direita, e a linha só empurrava o feed para baixo.
*/
.hm-topo { display: none !important; }
/* Os cartões do mobile herdam a moldura da web sem reescrever nada. */
.hm-compor, .hm-pub { border-radius: var(--ow-raio); box-shadow: var(--ow-sombra); }
}
/* =====================================================================
1.03.21b — PEÇAS DO EXPLORAR (e de qualquer tela de catálogo)
Continuam dentro do @media da web: no celular nada disto existe.
===================================================================== */
@media (min-width: 1024px) {
/* ── Cartão vazio ─────────────────────────────────────────── */
/*
* O widget que ainda não tem dado. Aparece com a moldura e a explicação
* do que vai aparecer ali — em vez de sumir (e o desenho ficar mais
* pobre que o aprovado) ou de mentir com nomes inventados.
*/
.ow-card--vazio .ow-card__topo h3 { color: var(--oa-ink-2); }
.ow-vazio-bloco {
padding: 4px 16px 18px;
display: flex; gap: 11px; align-items: flex-start;
}
.ow-vazio-bloco__icone {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center; font-size: 17px;
background: var(--t-sup3, #F0F2F5);
}
.ow-vazio-bloco p { font-size: 12.5px; color: var(--oa-ink-4); line-height: 1.5; }
.ow-vazio-bloco { align-items: center; }
/* ── Filtros rápidos (coluna da direita) ──────────────────── */
.ow-filtro {
display: flex; align-items: center; gap: 11px;
padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--oa-ink-2);
}
.ow-filtro:hover { background: var(--t-sup2, #F7F8FA); }
.ow-filtro__ic { flex: 0 0 auto; width: 20px; text-align: center; }
.ow-filtro__txt { flex: 1; min-width: 0; }
/* A chave liga/desliga. É um link com cara de interruptor: sem
JavaScript, e o estado vive na URL — dá para copiar e compartilhar a
busca filtrada. */
.ow-switch {
flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
background: var(--t-sup4, #D7DBE0); position: relative; transition: background .15s;
}
.ow-switch::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s;
}
.ow-filtro.is-on { color: var(--oa-azul); }
.ow-filtro.is-on .ow-switch { background: var(--oa-azul); }
.ow-filtro.is-on .ow-switch::after { transform: translateX(16px); }
/* ── Tira de filtros no meio ──────────────────────────────── */
.ow-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.ow-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 14px; border-radius: 999px;
background: var(--t-sup, #fff); border: 1px solid var(--oa-line);
font-size: 13px; font-weight: 600; color: var(--oa-ink-2);
white-space: nowrap;
}
.ow-chip:hover { border-color: var(--oa-azul); color: var(--oa-azul); }
.ow-chip.is-on {
background: var(--oa-azul); border-color: var(--oa-azul); color: #fff;
}
/* ── A página do Explorar na coluna do meio ───────────────── */
/*
* A tela foi desenhada para celular: tudo com `margin: 16px` e listas que
* rolam de lado. Na coluna do meio, a margem lateral viraria um degrau
* dentro do cartão, e uma lista horizontal desperdiçaria a largura.
*/
.exp-hero, .exp-sec { margin-left: 0 !important; margin-right: 0 !important; }
.exp-hero { border-radius: var(--ow-raio); }
/* A vitrine de empresas deixa de rolar de lado e vira grade de dois. */
.dest-scroll {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
overflow: visible !important;
padding: 0 !important;
}
/* Responsivo pelo espaço REAL da coluna do meio, não pelo monitor:
abaixo de 1360px de janela a coluna não comporta três cartões sem
apertar o nome da empresa. */
@media (max-width: 1359px) { .dest-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Monitor grande: o quarto cartão cabe com folga. */
@media (min-width: 1760px) { .dest-scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dest-card {
width: auto !important; min-width: 0 !important; flex: initial !important;
border-radius: var(--ow-raio);
box-shadow: var(--ow-sombra);
display: flex; flex-direction: column;
}
.dest-cover { height: 132px !important; }
.dest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* As categorias em grade de dois, em vez de uma coluna comprida. */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ── Ações do cartão da empresa ───────────────────────────── */
.ow-acoes {
display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
/*
* Com três cartões por linha o par "Ver loja" + "Agendar" não cabe lado
* a lado: o segundo encolhia até sobrar só o ícone (era o que aparecia
* no cartão da estetica 2). `flex-basis` mínimo obriga a quebrar para a
* linha de baixo em vez de espremer.
*/
.ow-acao {
flex: 1 1 96px; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; padding: 0 10px; border-radius: 9px;
font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.ow-acao--claro { background: var(--t-sup3, #F0F2F5); color: var(--oa-ink-2); }
.ow-acao--claro:hover { background: var(--t-sup4, #E4E6EB); }
.ow-acao--azul { background: var(--oa-azul); color: #fff; }
.ow-acao--azul:hover { filter: brightness(1.06); }
/* As abas do Explorar ganham o mesmo desenho das abas do feed. */
.exp-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--oa-line-soft); padding: 0 2px; margin-bottom: 14px; }
.exp-subtab { padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--oa-ink-4); }
.exp-subtab.active { color: var(--oa-azul); font-weight: 700; position: relative; }
.exp-subtab.active::after {
content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px;
height: 3px; border-radius: 3px 3px 0 0; background: var(--oa-azul);
}
}
/* =====================================================================
1.03.22 — NOTA E ESTRELAS + o shell nas telas do ValeFidelidade
===================================================================== */
/* Só para leitor de tela. Fica FORA do @media: vale nas duas larguras. */
.vf-sr-only {
position: absolute; display: block; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A nota. Cinco estrelas sempre; cinza é "ninguém avaliou", e é diferente
de "avaliaram mal" — por isso o texto ao lado diz "sem nota". */
.ow-nota { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; line-height: 1; }
.ow-nota__estrelas { display: inline-flex; gap: 1px; }
.ow-estrela { color: #D7DBE0; font-size: .78rem; }
.ow-estrela.is-on { color: #F59E0B; }
.ow-nota__val { font-weight: 800; color: var(--oa-ink, var(--t-tx, #111827)); }
.ow-nota__txt { color: var(--oa-ink-4, var(--t-tx4, #9CA3AF)); }
.ow-nota--sem .ow-nota__txt { font-style: italic; }
@media (min-width: 1024px) {
/*
* O topo e a barra inferior das telas herdadas do ValeFidelidade. Na web
* quem manda é o `.ow-topo` e a navegação da esquerda; estes dois são a
* versão de celular e precisam sair, senão aparecem dois topos.
*/
.vf-topbar { display: none !important; }
.cl-nav { display: none !important; }
/* Essas telas trazem respiro de celular no corpo; na coluna, sobra. */
body { padding-bottom: 0 !important; }
.ow-nota { font-size: .76rem; }
}
/* =====================================================================
1.03.26 — PEÇAS DA PÁGINA DA LOJA
Continuam no escopo da web: no celular a tela fica como era.
===================================================================== */
@media (min-width: 1024px) {
/* "Como você quer comprar?" — os modos que a loja realmente oferece. */
.ow-tiles {
display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 8px; padding: 4px 16px 16px;
}
.ow-tile {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 12px 8px; border-radius: 12px; text-align: center;
border: 1.5px solid var(--oa-line); background: var(--t-sup, #fff);
}
.ow-tile:hover { border-color: var(--oa-azul); }
.ow-tile.is-on { border-color: var(--oa-azul); background: var(--t-50, #EFF6FF); }
.ow-tile__ic { font-size: 19px; line-height: 1; }
.ow-tile__t { display: block; font-size: 13px; font-weight: 800; color: var(--oa-ink); }
.ow-tile__s { display: block; font-size: 10.5px; color: var(--oa-ink-4); line-height: 1.25; }
/* Ponto verde/vermelho do "Aberto agora". */
.ow-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.ow-ponto--on { background: #16A34A; }
.ow-ponto--off { background: #DC2626; }
.ow-horas {
padding: 0 16px 12px; font-size: 12.5px; line-height: 1.7;
color: var(--oa-ink-2); white-space: pre-line;
}
/*
* A CAPA DA LOJA na coluna do meio.
*
* A tela foi desenhada para celular, onde a capa ocupa a largura toda da
* janela. Dentro da coluna ela precisa de cantos e de altura menor —
* senão fica uma faixa preta gigante, como está no print.
*/
.loja-capa, .loja-cover { border-radius: var(--ow-raio) var(--ow-raio) 0 0; max-height: 220px; }
.loja-header, .loja-topo { border-radius: var(--ow-raio); overflow: hidden; }
/* As abas da loja ganham o mesmo desenho das outras abas da web. */
.tab-item { padding: 12px 14px; font-size: 14px; }
.tab-item.active { font-weight: 700; }
/* A vitrine "Destaques da loja" usa a MESMA `.dest-scroll` do explorar,
então já herda a grade responsiva de 2/3/4 colunas. Aqui só o respiro
das seções, que vinham com margem de celular. */
.dest-sec, .loja-sec { margin-left: 0 !important; margin-right: 0 !important; }
}
/* =====================================================================
1.03.27 — A BARRA DE ROLAGEM DA PÁGINA, NO MESMO PADRÃO DAS COLUNAS
Fina, arredondada, discreta, escurecendo ao passar o mouse. Sem isto a
barra do navegador ficaria larga e cinza ao lado de duas barras finas —
três estilos diferentes na mesma tela.
===================================================================== */
@media (min-width: 1024px) {
html { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, .22) transparent; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb {
background: rgba(16, 24, 40, .22);
border-radius: 8px;
/* A borda transparente afina o polegar sem estreitar a área de clique,
que continua com os 10px inteiros. */
border: 3px solid transparent;
background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .38); background-clip: content-box; }
}
/* =====================================================================
1.03.28 — PAINÉIS DO TOPO E A TELA DE PERFIL
===================================================================== */
/* O véu e os painéis existem nas duas larguras: no celular eles também
são a forma certa de mostrar conta, notificações e conversas. */
.ow-veu {
position: fixed; inset: 0; z-index: 90;
background: rgba(16, 24, 40, .45);
opacity: 0; transition: opacity .2s;
}
.ow-veu.is-on { opacity: 1; }
.ow-pn {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
width: min(380px, 92vw);
display: flex; flex-direction: column;
background: var(--t-sup, #fff);
box-shadow: -8px 0 32px rgba(16, 24, 40, .16);
/* Começa fora da tela e entra deslizando. `transform` e não `right`:
o navegador anima transform sem recalcular layout a cada quadro. */
transform: translateX(100%);
transition: transform .22s ease;
}
.ow-pn.is-on { transform: translateX(0); }
.ow-pn__topo {
display: flex; align-items: center; gap: 10px;
padding: 16px; border-bottom: 1px solid var(--oa-line-soft, var(--t-linha, #EEF0F3));
}
.ow-pn__topo h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; color: var(--oa-ink, var(--t-tx, #111827)); }
.ow-pn__x {
width: 32px; height: 32px; border: 0; border-radius: 50%;
background: var(--t-sup3, #F0F2F5); color: var(--t-tx2, #4B5563); font-size: 14px; cursor: pointer;
}
.ow-pn__x:hover { background: var(--t-sup4, #E4E6EB); }
.ow-pn__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 20px; }
.ow-pn__item {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px;
color: var(--oa-ink-2, var(--t-tx2, #374151)); text-decoration: none;
}
.ow-pn__item:hover { background: var(--t-sup2, #F7F8FA); }
.ow-pn__item.is-nova { background: var(--t-sup2, #F5F8FF); }
.ow-pn__item--sair { color: #B91C1C; margin-top: 8px; border-top: 1px solid var(--oa-line-soft, var(--t-linha, #EEF0F3)); }
.ow-pn__ic {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center; background: var(--t-sup3, #F0F2F5); font-size: 16px;
}
@media (min-width: 1024px) {
/*
* A ENGRENAGEM SAI (1.03.28). O que ela abria agora abre pelo nome no
* topo, que existe em toda página — antes, só quem estivesse no perfil
* alcançava as configurações.
*/
.pfx-bt-capa--ico { display: none !important; }
/* ── A capa do perfil ─────────────────────────────────────
* Desenhada para celular: capa baixa e foto pequena. Na coluna do meio
* há espaço para a foto grande e redonda do desenho oficial.
*/
.pfx-capa { border-radius: var(--ow-raio); min-height: 210px; }
.pfx-foto img, .pfx-foto { width: 132px !important; height: 132px !important; border-radius: 50% !important; }
.pfx-id h1, .pfx-nome { font-size: 26px; letter-spacing: -.6px; }
.pfx-bloco { border-radius: var(--ow-raio); box-shadow: var(--ow-sombra); }
/* ── Destaques, no formato do Instagram ────────────────── */
.pfx-dest { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.pfx-dest::-webkit-scrollbar { display: none; }
.pfx-dest > a { text-align: center; flex: 0 0 auto; width: 84px; text-decoration: none; }
.pfx-dest__c {
width: 78px; height: 78px; border-radius: 50%;
display: grid; place-items: center; overflow: hidden;
/* O anel: dois pixels de branco entre a borda e a foto, como no
Instagram — sem ele a imagem encosta na linha e fica suja. */
border: 2px solid var(--oa-line, #E5E7EB);
padding: 3px; background: #fff;
color: var(--oa-ink-4, #9CA3AF);
}
.pfx-dest__c img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pfx-dest > a small {
display: block; margin-top: 7px; font-size: 11.5px; font-weight: 600;
color: var(--oa-ink-2, #374151);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Progresso do cadastro (coluna da direita) ─────────── */
.ow-prog { height: 8px; border-radius: 999px; background: var(--t-sup4, #E7E9EC); overflow: hidden; margin: 2px 0 10px; }
.ow-prog__b { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--t-cor, #2563eb), var(--t-cor2, #7c3aed)); }
.ow-check { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; color: var(--oa-ink-2); }
.ow-check__m { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
font-size: 11px; background: var(--t-sup4, #E7E9EC); color: var(--t-tx4, #9CA3AF); }
.ow-check.is-on .ow-check__m { background: #16A34A; color: #fff; }
.ow-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.ow-tag { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
background: var(--t-sup3, #F0F2F5); color: var(--oa-ink-2); }
}
/* =====================================================================
1.03.29 — OS PAINÉIS COM O DESENHO ORIGINAL + O TOPO DO PERFIL NA WEB
===================================================================== */
/* ── Painéis: as classes `cfg-*` da folha do perfil, agora globais ──
Escopadas em `.ow-pn` para não brigar com a cópia que a página de
perfil ainda tem para o celular. */
.ow-pn { background: var(--t-sup3, #F4F5F7); }
.ow-pn .cfg-cab {
display: flex; align-items: center; gap: 11px;
padding: 16px; background: var(--t-sup, #fff);
border-bottom: 1px solid var(--t-linha, #EAECEF);
}
.ow-pn .cfg-cab__c { flex: 1; min-width: 0; display: block; }
.ow-pn .cfg-cab__n { display: block; font-size: 15.5px; font-weight: 800; color: var(--t-tx, #111827); }
.ow-pn .cfg-cab__e {
display: block; font-size: 12.5px; color: var(--t-tx4, #9CA3AF); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-pn .cfg-cab__link { text-decoration: none !important; font-weight: 600; }
.ow-pn .cfg-x {
flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
background: var(--t-sup3, #F0F2F5); color: var(--t-tx2, #4B5563); cursor: pointer;
display: grid; place-items: center;
}
.ow-pn .cfg-x:hover { background: var(--t-sup4, #E4E6EB); }
.ow-pn .cfg-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 26px; }
.ow-pn .cfg-grupo + .cfg-grupo { margin-top: 18px; }
.ow-pn .cfg-grupo h3 {
font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
color: var(--t-tx4, #9CA3AF); margin: 0 4px 8px;
}
/* O cartão que agrupa os itens — é ele que dava o ar de acabado no
desenho antigo, e o que faltou na versão anterior. */
.ow-pn .cfg-caixa {
background: var(--t-sup, #fff); border: 1px solid var(--t-linha, #EAECEF); border-radius: 14px; overflow: hidden;
}
.ow-pn .cfg-i {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; color: var(--t-tx, #111827); text-decoration: none !important;
}
.ow-pn .cfg-i + .cfg-i { border-top: 1px solid var(--t-linha, #F1F2F4); }
.ow-pn .cfg-i:hover { background: var(--t-sup2, #F8F9FB); }
.ow-pn .cfg-i--nova { background: var(--t-sup2, #F5F8FF); }
.ow-pn .cfg-i__ic {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
display: grid; place-items: center;
background: var(--t-50, #EEF3FF); color: var(--t-cor-tx, #2563eb);
}
.ow-pn .cfg-i__t { flex: 1; min-width: 0; display: block; }
.ow-pn .cfg-i__t b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ow-pn .cfg-i__t small {
display: block; font-size: 12px; color: var(--t-tx4, #9CA3AF); line-height: 1.35; margin-top: 1px;
}
.ow-pn .cfg-i__seta { flex: 0 0 auto; color: var(--t-tx4, #C6CAD1); }
.ow-pn .cfg-i__qtd {
flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
display: grid; place-items: center; border-radius: 999px;
background: #DC2626; color: #fff; font-size: 11px; font-weight: 800;
}
.ow-pn .cfg-i__ponto {
flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--t-cor, #2563eb);
}
/* 1.03.155 — trocar entre a empresa e o perfil pessoal: o item é um botão
(formulário com o CSRF), com a mesma cara dos links. */
.troca-form { display: contents; }
.ow-pn button.cfg-i {
width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.ow-pn .troca-form + .troca-form .cfg-i { border-top: 1px solid var(--t-linha, #F1F2F4); }
.ow-pn .cfg-i--troca .cfg-i__ic { background: var(--t-cor, #2563eb); color: #fff; }
.ow-pn .cfg-i--sair { color: #B91C1C; }
.ow-pn .cfg-i--sair .cfg-i__ic { background: var(--t-sup2, #FEF2F2); color: #B91C1C; }
.ow-pn .cfg-vazio { text-align: center; padding: 48px 26px; color: var(--t-tx4, #9CA3AF); }
.ow-pn .cfg-vazio span { font-size: 30px; display: block; margin-bottom: 10px; }
.ow-pn .cfg-vazio p { font-size: 13px; line-height: 1.55; }
/* ── O topo do perfil na web ──────────────────────────────── */
.pfw-topo { display: none; }
@media (min-width: 1024px) {
/* A capa e os blocos do celular saem; este bloco entra. */
.pfx-capa { display: none !important; }
.pfx-bio { display: none !important; }
.pfx-acoes { display: none !important; }
.pfw-topo {
display: block; position: relative; overflow: hidden;
border-radius: var(--ow-raio);
background: var(--t-capa, linear-gradient(120deg, #1D4ED8 0%, #4F46E5 45%, #7C3AED 100%));
padding: 26px 28px 28px;
margin-bottom: 16px;
}
/* O brilho do canto, igual ao do desenho: um círculo claro e borrado. */
.pfw-fundo {
position: absolute; top: -120px; right: -60px; width: 340px; height: 340px;
border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none;
}
.pfw-linha { position: relative; display: flex; align-items: flex-start; gap: 24px; }
.pfw-foto { position: relative; flex: 0 0 auto; display: block; text-decoration: none !important; }
.pfw-foto .oa-avatar, .pfw-foto img {
width: 150px !important; height: 150px !important;
border-radius: 50% !important; object-fit: cover;
border: 5px solid var(--t-sup, #fff); background: var(--t-sup, #fff);
box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.pfw-cam {
position: absolute; right: 6px; bottom: 6px;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: #111827; color: #fff; border: 3px solid var(--t-sup, #fff);
}
.pfw-txt { flex: 1; min-width: 0; padding-top: 6px; color: #fff; }
.pfw-txt h1 {
display: flex; align-items: center; gap: 9px;
font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15;
}
.pfw-ok { color: #38BDF8; flex: 0 0 auto; }
.pfw-arroba { font-size: 15px; color: rgba(255, 255, 255, .78); margin-top: 3px; }
.pfw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pfw-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
font-size: 13px; font-weight: 600; color: #fff;
}
.pfw-bio {
margin-top: 12px; max-width: 560px;
font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .92);
}
.pfw-acoes { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.pfw-bt {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 168px; padding: 11px 18px; border-radius: 11px;
font-size: 14px; font-weight: 700; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .28);
text-decoration: none !important; font-family: inherit;
}
.pfw-bt--claro { background: rgba(255, 255, 255, .16); color: #fff; }
.pfw-bt--claro:hover { background: rgba(255, 255, 255, .26); }
.pfw-bt--azul { background: var(--t-sup, #fff); color: var(--t-cor-tx, #1D4ED8); border-color: var(--t-sup, #fff); }
.pfw-bt--azul:hover { filter: brightness(.96); }
}
/* =====================================================================
1.03.31 — AVALIAR (vale nas duas larguras: avaliar é do celular também)
===================================================================== */
.av-caixa {
background: var(--t-sup, #fff); border: 1px solid var(--t-linha, #EAECEF); border-radius: 14px;
padding: 14px; margin-bottom: 14px;
}
.av-caixa__t { font-size: 14px; font-weight: 800; color: var(--t-tx, #111827); margin-bottom: 8px; }
/*
* As estrelas clicáveis.
*
* São rádios de verdade (funcionam com teclado e com leitor de tela), com
* a ORDEM INVERTIDA no HTML — 5,4,3,2,1. Isso permite pintar "esta e as
* anteriores" com o seletor de irmão `~`, que só enxerga para a frente.
* Sem a inversão, seria preciso JavaScript para o efeito de passar o mouse.
*/
.av-estrelas {
display: inline-flex; flex-direction: row-reverse;
gap: 2px; margin-bottom: 10px;
}
.av-estrelas input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-estrelas label {
font-size: 30px; line-height: 1; color: #D7DBE0; cursor: pointer;
transition: color .12s, transform .12s;
}
.av-estrelas label:hover,
.av-estrelas label:hover ~ label,
.av-estrelas input:checked ~ label { color: #F59E0B; }
.av-estrelas label:hover { transform: scale(1.12); }
/* Foco visível pelo teclado: sem isto, quem navega por Tab não sabe onde
está — o rádio real está escondido. */
.av-estrelas input:focus-visible + label { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 4px; }
.av-txt {
width: 100%; border: 1px solid var(--t-linha, #E5E7EB); border-radius: 10px;
padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical;
}
.av-txt:focus { outline: none; border-color: var(--t-cor, #2563eb); }
.av-acoes { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.av-msg { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t-tx3, #6B7280); }
.av-msg--ok { color: #15803D; font-weight: 600; }
.av-msg--erro { color: #B91C1C; font-weight: 600; }
.av-lista { display: flex; flex-direction: column; gap: 12px; }
.av-item { display: flex; gap: 11px; align-items: flex-start; }
.av-item__n { font-size: 13.5px; font-weight: 700; color: var(--t-tx, #111827); }
.av-item__c { font-size: 13px; color: var(--t-tx2, #374151); line-height: 1.5; margin-top: 4px; }
/* =====================================================================
1.03.32 — A PALETA DE BUSCA
Vale nas duas larguras: no celular ela ocupa quase a tela inteira e é
melhor que mandar a pessoa para outra página.
===================================================================== */
.bx-fundo {
position: fixed; inset: 0; z-index: 120;
background: rgba(16, 24, 40, .45);
opacity: 0; transition: opacity .18s;
}
.bx-fundo.is-on { opacity: 1; }
.bx-caixa {
position: fixed; z-index: 121;
top: 12vh; left: 50%;
width: min(680px, 94vw); max-height: 74vh;
display: flex; flex-direction: column;
background: var(--t-sup, #fff); border-radius: 16px;
box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
/* Entra subindo um pouco: dá a sensação de que veio da caixa do topo. */
transform: translate(-50%, -8px); opacity: 0;
transition: transform .18s ease, opacity .18s ease;
}
.bx-caixa.is-on { transform: translate(-50%, 0); opacity: 1; }
.bx-topo {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px; border-bottom: 1px solid var(--t-linha, #EEF0F3);
color: var(--t-tx4, #9CA3AF);
}
.bx-topo input {
flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
font: inherit; font-size: 16px; color: var(--t-tx, #111827);
}
.bx-esc {
font: inherit; font-size: 11px; font-weight: 700; color: var(--t-tx4, #9CA3AF);
padding: 3px 7px; border: 1px solid var(--t-linha, #E5E7EB); border-radius: 6px;
}
.bx-x {
width: 30px; height: 30px; border: 0; border-radius: 50%;
background: var(--t-sup3, #F0F2F5); color: var(--t-tx2, #4B5563); cursor: pointer;
display: grid; place-items: center;
}
.bx-x:hover { background: var(--t-sup4, #E4E6EB); }
.bx-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0 14px; }
.bx-grupo + .bx-grupo { margin-top: 6px; }
.bx-grupo__t {
display: flex; align-items: center; gap: 7px;
padding: 10px 18px 6px;
font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
color: var(--t-tx4, #9CA3AF);
}
.bx-grupo__t i {
font-style: normal; font-size: 10.5px; font-weight: 800;
padding: 1px 6px; border-radius: 999px; background: var(--t-sup3, #F0F2F5); color: var(--t-tx3, #6B7280);
}
.bx-i {
display: flex; align-items: center; gap: 12px;
padding: 9px 18px; color: var(--t-tx, #111827); text-decoration: none !important;
}
.bx-i:hover, .bx-i.is-sel { background: var(--t-sup2, #F5F8FF); }
/* A seleção pelo teclado precisa de um sinal mais forte que o hover:
quem está no teclado não tem o cursor para se localizar. */
.bx-i.is-sel { box-shadow: inset 3px 0 0 var(--t-cor, #2563eb); }
.bx-i__img {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
object-fit: cover; background: var(--t-sup3, #F0F2F5);
}
.bx-i__ic {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
display: grid; place-items: center; background: var(--t-sup3, #F0F2F5); font-size: 18px;
}
.bx-i__t { flex: 1; min-width: 0; display: block; }
.bx-i__t b {
display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-i__t small {
display: block; font-size: 12px; color: var(--t-tx4, #9CA3AF); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-i__t mark { background: #FEF3C7; color: inherit; padding: 0 1px; border-radius: 3px; }
.bx-i__tag {
flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: .4px; padding: 3px 8px; border-radius: 999px;
background: var(--t-50, #EEF3FF); color: var(--t-cor-tx, #2563eb);
}
.bx-nada { padding: 34px 20px; text-align: center; font-size: 14px; color: var(--t-tx3, #6B7280); }
.bx-nada span { display: block; font-size: 12.5px; color: var(--t-tx4, #9CA3AF); margin-top: 6px; }
.bx-todos {
display: block; margin: 10px 18px 2px; padding: 11px;
text-align: center; border-radius: 10px;
background: var(--t-sup3, #F0F2F5); color: var(--t-cor-tx, #2563eb);
font-size: 13px; font-weight: 700; text-decoration: none !important;
}
.bx-todos:hover { background: var(--t-sup4, #E4E6EB); }
/* Atalhos: o estado de antes de digitar. Duas colunas, como no desenho. */
.bx-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 0 10px; }
.bx-atalho {
display: flex; align-items: center; gap: 11px;
padding: 10px 10px; border-radius: 10px;
font-size: 14px; font-weight: 600; color: var(--t-tx2, #374151); text-decoration: none !important;
}
.bx-atalho:hover, .bx-atalho.is-sel { background: var(--t-sup2, #F5F8FF); color: var(--t-cor-tx, #2563eb); }
.bx-atalho__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
display: grid; place-items: center; background: var(--t-sup3, #F0F2F5); font-size: 15px; }
@media (max-width: 700px) {
.bx-caixa { top: 0; left: 0; width: 100%; max-height: 100vh; height: 100%;
border-radius: 0; transform: none; }
.bx-caixa.is-on { transform: none; }
.bx-atalhos { grid-template-columns: 1fr; }
.bx-esc { display: none; }
}
/* A caixa do topo vira gatilho: cursor de clique, não de texto. */
@media (min-width: 1024px) {
.ow-busca input[readonly] { cursor: pointer; }
}
/* =====================================================================
1.03.33 — O ATRIBUTO `hidden` VOLTA A FUNCIONAR
BUG: a paleta de busca e os painéis ficavam "invisíveis mas clicáveis".
Passando o mouse no meio da tela apareciam links de Início, Minha
agenda, Meus vouchers e Perfil, vindos dos atalhos da paleta.
CAUSA: `[hidden]` é `display: none` na folha do navegador — a regra
mais fraca que existe. Qualquer `display` declarado numa CLASSE vence.
Como eu escrevi `.bx-caixa { display: flex }` e `.ow-pn { display: flex }`,
os dois continuavam no layout: transparentes (opacity 0) e fora de
posição (translate), mas presentes, recebendo mouse e Tab.
Esta é a regra que faltava. Fica no fim do arquivo de propósito: em
empate de especificidade, a última vence.
===================================================================== */
.bx-caixa[hidden],
.bx-fundo[hidden],
.ow-pn[hidden],
.ow-veu[hidden] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
1.03.79 — MODO EMPRESA: o selo no topo da navegação e o cartão do hub
no pé (partials/web-nav-empresa.php).
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
.owe-selo {
display: flex; align-items: center; gap: 10px;
margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
background: linear-gradient(135deg, var(--t-50, #EEF2FF) 0%, var(--t-sup2, #F5F3FF) 100%); border: 1px solid var(--t-100, #E0E7FF);
}
.owe-selo__ico {
display: grid; place-items: center; flex: 0 0 auto;
width: 30px; height: 30px; border-radius: 9px; background: var(--t-cor, #4F46E5); color: #fff;
}
.owe-selo__txt { display: block; flex: 1; min-width: 0; }
.owe-selo__txt b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--t-cor-tx, #4338CA); }
.owe-selo__txt span { display: block; font-size: 13.5px; font-weight: 700; color: var(--oa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 1.03.155 — "Ir para o meu perfil pessoal", logo abaixo do selo. */
.owe-troca {
display: flex; align-items: center; gap: 8px; width: 100%; margin: -4px 0 14px; padding: 9px 12px;
border: 1px solid var(--t-100, #E0E7FF); border-radius: 11px; background: var(--t-sup, #fff);
font: inherit; font-size: 13.5px; font-weight: 700; color: var(--t-cor-tx, #4338CA); text-align: left; cursor: pointer;
}
.owe-troca:hover, .owe-troca:focus-visible { background: var(--t-50, #EEF2FF); }
.owe-troca svg { flex: 0 0 auto; }
.owe-hub {
margin: 22px 0 0; padding: 16px 16px 15px; border-radius: 13px;
background: #0F0B24; color: #fff;
}
.owe-hub b { display: block; font-size: 14.5px; font-weight: 800; }
.owe-hub p { margin: 5px 0 12px; font-size: 12.8px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.owe-hub a {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 13px; border-radius: 9px; background: var(--t-sup, #fff);
font-size: 13px; font-weight: 700; color: var(--t-tx, #0F0B24) !important;
}
.owe-hub a:hover { background: var(--t-100, #E0E7FF); }
}
/* ═══════════════════════════════════════════════════════════════════
1.03.81 — A EMPRESA USANDO O OASIS, SEMPRE COMO EMPRESA
Foto quadrada (cantos arredondados) para empresa, redonda para pessoa;
o selo "Empresa" ao lado do nome; "Publicando como" no compositor.
Fora de @media: vale no celular e na web, e nas telas herdadas do Vale
(que não carregam o oasis.css).
═══════════════════════════════════════════════════════════════════ */
.oa-avatar.oa-avatar--empresa { border-radius: 27% !important; }
.mp-av:has(> .oa-avatar--empresa) .mp-on { right: -2px; bottom: -2px; }
.oa-selo-emp {
display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
margin-left: 6px; padding: 1px 7px 1px 6px; border-radius: 999px;
background: var(--t-50, #EEF2FF); color: var(--t-cor-tx, #4338CA); border: 1px solid var(--t-100, #E0E7FF);
font-size: 10.5px; font-weight: 800; line-height: 16px; letter-spacing: .2px;
vertical-align: 2px; white-space: nowrap;
}
.oa-selo-emp svg { display: block; flex: 0 0 auto; }
.oa-como {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 0 0 10px; font-size: 12.5px; color: var(--oa-ink-4, var(--t-tx3, #64748B));
}
.oa-como b { color: var(--oa-ink, var(--t-tx, #0F172A)); font-weight: 700; }
.oa-como .oa-selo-emp { margin-left: 0; }
.oa-como--comentar { margin: 12px 0 0; }
/* O nome da empresa no topo: inteiro (a primeira palavra de "Imobiliária
Horizonte" não diz nada), cortado com reticências. */
.ow-eu.ow-eu--empresa > span:not(.oa-avatar) { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A lateral da empresa em dois grupos: "Sua empresa" e "No OASIS". */
@media (min-width: 1024px) {
.owe-grupo {
display: block; padding: 16px 12px 6px;
font-size: 11.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: .5px; color: var(--oa-ink-4, var(--t-tx3, #64748B));
}
.owe-grupo--primeiro { padding-top: 4px; }
}
/* Aviso de "como empresa, aqui você só vê". */
.oa-emp-aviso {
display: flex; align-items: flex-start; gap: 10px;
margin: 12px 0; padding: 11px 13px; border-radius: 12px;
background: var(--t-sup2, #EEF2FF); border: 1px solid #E0E7FF; color: #3730A3;
font-size: 13px; line-height: 1.45;
}
.oa-emp-aviso svg { display: block; flex: 0 0 auto; margin-top: 1px; }
.oa-emp-aviso b { color: #312E81; }
.oa-selo-emp.oa-selo-emp--sem-margem { margin-left: 0; }
/* 1.03.81 — a página de uma publicação (`?page=publicacao`) não tinha
estilo para o cartão (`.in-pub*`): nome, texto e botões saíam soltos.
É por ela que a empresa (e qualquer um) comenta. */
.in-pub {
display: block; min-width: 0; padding: 16px 18px 6px;
background: var(--t-sup, #fff); border: 1px solid var(--oa-line-soft, var(--t-linha, #E6EAF0)); border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.in-pub__topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.in-pub__topo > a { color: inherit; text-decoration: none; }
.in-pub__nome { display: block; font-size: 15px; font-weight: 800; color: var(--oa-ink, var(--t-tx, #0F172A)); line-height: 1.3; }
.in-pub__quando { display: block; margin-top: 2px; font-size: 12.5px; color: var(--oa-ink-4, var(--t-tx3, #64748B)); }
.in-pub__texto { margin: 12px 0 10px; font-size: 15px; line-height: 1.55; color: var(--oa-ink-2, var(--t-tx, #1E293B)); overflow-wrap: anywhere; }
.in-pub__midia { margin: 0 0 10px; }
.in-pub__midia img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 12px; }
.in-pub__acoes { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 0; border-top: 1px solid var(--oa-line-soft, var(--t-linha, #EEF1F5)); }
.in-pub__acao {
display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
border: 0; border-radius: 9px; background: none; cursor: pointer;
font: inherit; font-size: 14px; font-weight: 600; color: var(--oa-ink-3, var(--t-tx2, #475569));
}
button.in-pub__acao:hover { background: var(--t-sup2, #F4F6F9); }
.in-pub__acao.is-on { color: #E11D48; }
.in-pub__acao svg { display: block; flex: 0 0 auto; }
/* 1.03.81 — nas telas herdadas do Vale (marketplace, Explorar, loja) o
`oasis.css` não carrega, e o avatar da coluna da direita da empresa
ficava sem fundo nem forma. A base dele mora aqui também. */
@media (min-width: 1024px) {
.ow-direita .oa-avatar {
display: grid; place-items: center; flex: 0 0 auto;
border-radius: 50%; object-fit: cover; overflow: hidden;
background: var(--t-50, #E7EDFF); color: var(--oa-azul, var(--t-cor-tx, #1D4ED8)); font-weight: 800;
}
.ow-direita .oa-avatar.oa-avatar--empresa { border-radius: 27% !important; }
}
/* Nome + selo em listas que cortam o nome (Social::nome): corta só o nome. */
.oa-nomesel { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; vertical-align: bottom; }
.oa-nomesel__n { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-nomesel .oa-selo-emp { flex: 0 0 auto; }
/* 1.03.89 — entre 1024 e 1279 px a coluna da esquerda fica com 200 px em
todas as telas (a mesma regra do perfil). */
@media (min-width: 1024px) and (max-width: 1279px) {
:root { --ow-lado-w: 200px; }
/* Nos 200 px não cabe o "Gerenciar": o mesmo caminho é o item Ferramentas, logo acima. */
.ow-shell > .ow-lado .ow-lado__titulo a[href="?page=ferramentas"]:not([style]) { display: none; }
}