/* ÁREA DO CLIENTE — o padrão visual comum (25/09/2026).
   Pedro, depois do Escritório: "segue isso em todo o site, em toda a área de cliente".
   O mesmo desenho do escritorio.html: faixa colorida no topo de cada tela, na cor da
   ferramenta (a mesma do atalho na página do projeto), e tabela de cabeçalho claro.
   🪤 CSS próprio, não utilitário: o /tailwind.min.css é um build ESTÁTICO — classe que
   não está lá não pinta e não avisa.

   Uso: <section class="faixa" style="--c1:#16A34A;--c2:#4ADE80"> … </section>
   Cores (iguais às do Escritório): quantitativo #0891B2/#22D3EE · cronograma #EA580C/#FB923C
   · memorial #2563EB/#60A5FA · revisão #E11D48/#FB7185 · comparativo #0D9488/#2DD4BF
   · financeiro #16A34A/#4ADE80 · painel #4F46E5/#06B6D4 */

.faixa{--c1:#4F46E5;--c2:#06B6D4;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:22px 24px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 14px 30px -20px var(--c1)}
.faixa::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-50px;top:-110px;
  background:rgba(255,255,255,.12);pointer-events:none}
.faixa::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:170px;bottom:-100px;
  background:rgba(255,255,255,.07);pointer-events:none}
.faixa > *{position:relative;z-index:1}
.faixa h1,.faixa h2{margin:0;font-size:22px;font-weight:700;color:#fff;line-height:1.2}
.faixa p{margin:4px 0 0;font-size:13.5px;color:rgba(255,255,255,.9);line-height:1.5}
.faixa p b,.faixa p strong{color:#fff}
.faixa h1,.faixa h2,.faixa p{text-shadow:0 1px 2px rgba(15,23,42,.18)}
/* o botão principal da tela, dentro da faixa: branco com o texto na cor dela */
.fx-botao{background:#fff;color:var(--c1);border:0;cursor:pointer;box-shadow:0 6px 16px -8px rgba(15,23,42,.45);transition:background .15s}
.fx-botao:hover{background:#F8FAFC}
.fx-ico{width:48px;height:48px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff}
.fx-ico svg{width:24px;height:24px}
.fx-texto{flex:1 1 260px;min-width:0}
.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fx-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:4px 11px}
@media (max-width:640px){ .faixa{padding:18px} .faixa h2{font-size:19px} .fx-ico{width:42px;height:42px} }

/* ícone desenhado num quadradinho na cor da coisa (o mesmo dos atalhos do Escritório) — no lugar dos emojis */
.ico-tile{--c1:#4F46E5;--c2:#818CF8;width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px -8px var(--c1)}
.ico-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico-tile.p{width:40px;height:40px;border-radius:12px} .ico-tile.p svg{width:20px;height:20px}
/* linha de projeto (Meus projetos): borda esquerda na cor da tipologia e leve subida ao apontar */
.pj-linha{border-left:4px solid var(--c1,#CBD5E1) !important;border-radius:14px !important;transition:transform .15s ease,box-shadow .15s ease}
.pj-linha.group:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px var(--c1,#4F46E5) !important}
@media (prefers-reduced-motion:reduce){ .pj-linha,.pj-linha.group:hover{transition:none;transform:none} }
/* grade que se ajusta: 4 no computador, 2 no tablet, 1 no celular (sem cortar texto em 375 px) */
.grade-auto{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* 26/09 (Pedro: "ao mudar de página o site fica carregando de novo"): o "Carregando…" (#gate) cobria a
   tela INTEIRA, menu junto, em branco — cada troca parecia recarregar o site. Agora, no computador, ele
   cobre só o conteúdo: o menu (fixo, 248 px) fica parado, e o fundo é o da página, sem clarão. */
#gate{background:#F9FAFB !important}
@media (min-width:1024px){ #gate{left:248px !important} }

/* tabela da casa: cabeçalho CLARO no tom da ferramenta (era a faixa preta bg-slate-800).
   O seletor com a tabela vence o utilitário do Tailwind sem !important. */
table.tab-clara thead th{background:color-mix(in srgb,var(--c1,#4F46E5) 9%,#fff);color:#334155;
  border-bottom:2px solid color-mix(in srgb,var(--c1,#4F46E5) 28%,#fff)}
table.tab-clara thead th span{color:#64748B}