/* Camada do CRM sobre o sistema Industry (industry.css). O sistema entrega tokens, moldura
* hairline e componentes; aqui moram as estruturas que so existem neste produto: a tela de
* acesso, o topo do painel, a grade de indicadores e a vitrine publica.
*
* Carrega depois de industry.css — o Propshaft lista os arquivos de app/assets/stylesheets
* em ordem alfabetica, e "siteimob" vem depois de "industry". Sem @layer, pelo mesmo motivo
* explicado la.
*/
/* ── interacoes compartilhadas ─────────────────────────────────────────────────────────── */
.eleva { transition: transform .16s, box-shadow .16s; }
.eleva:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@keyframes entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.entra { animation: entra .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
.entra { animation: none; }
.eleva { transition: none; }
.eleva:hover { transform: none; }
}
/* Quadradinho com iniciais. Substitui a foto que o cadastro nao tem: duas letras em
Barlow Condensed sobre um bloco de aco, do mesmo tamanho da linha da tabela. */
.marca {
display: grid; place-items: center; flex: none;
width: 32px; height: 32px;
font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px;
background: var(--color-neutral-300); color: var(--color-neutral-800);
}
.marca--ativa { background: var(--color-accent-300); color: var(--color-accent-800); }
.marca--grande { width: 38px; height: 38px; font-size: 14px; }
/* Tabela larga nao encolhe: ela rola dentro do proprio cartao, e a pagina nunca ganha barra
horizontal. */
.rolagem { overflow-x: auto; }
/* ── avisos e erros ────────────────────────────────────────────────────────────────────── */
.aviso {
display: flex; align-items: flex-start; gap: 10px;
padding: 11px 15px; font-size: 13.5px;
border: 1px solid var(--color-divider);
}
.aviso--ok { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-300); }
.aviso--erro { background: var(--color-neutral-100); color: var(--color-neutral-900); border-color: var(--color-neutral-400); }
/* O bloco de erros de validacao segue a mesma paleta mono do resto: o peso da moldura e o
titulo em versal e que dizem "isto exige acao", nao um vermelho que nao existe no sistema. */
.erros {
padding: 13px 16px; font-size: 13.5px;
border: 1px solid var(--color-neutral-500); background: var(--color-neutral-100);
}
.erros > strong {
display: block; margin-bottom: 5px;
font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
}
.erros ul { margin: 0; padding-left: 18px; }
/* ── formularios ───────────────────────────────────────────────────────────────────────── */
/* Grade de seis colunas, como no desenho: um campo declara quantas ocupa com .span-N. Em
tela estreita todos viram largura cheia — um CEP de duas colunas em 360px seria uma caixa
de dois digitos. */
.campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: 1 / -1; }
@media (max-width: 860px) {
.campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-3, .span-4 { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.campos { grid-template-columns: 1fr; }
.span-1, .span-2 { grid-column: auto; }
}
.dica {
display: block; margin-top: 4px; font-size: 11.5px;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.obrigatorio { color: var(--color-accent-700); }
/* Paragrafo de apoio logo abaixo de um titulo: o mesmo corpo do formulario, sem a margem
inferior que o do sistema traz. */
.apoio { font-size: 14px; margin: 0; }
.apoio--miudo { font-size: 12.5px; }
/* Rotulo de um lado, atalho do outro (a linha "Senha … Esqueci minha senha"). */
.entre-campos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pilha { display: flex; flex-direction: column; gap: 18px; }
.pilha--curta { gap: 12px; }
/* O Rails embrulha o campo invalido em div.field_with_errors; sem isto, a unica pista do
erro seria a lista no topo do formulario. */
.field_with_errors { display: contents; }
.field_with_errors .input { border-color: var(--color-neutral-600); border-width: 1.5px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* `button_to` gera um