/* public/css/cliente.css
   ══════════════════════════════════════════════════════════════════════════════════════
   A pele da área do cliente. Portada do mockup aprovado pelo Biel em 17/09/2026
   (docs/superpowers/mockups/2026-09-17-resumo-do-cliente.html), Fase 3 do redesign.

   Carrega DEPOIS de painel.css de propósito: o bloco "REDESIGN PAINEL CLIENTES (c2)" ainda
   vive lá e seria vencedor por ordem de cascata. O prefixo `cl-` evita colisão com as
   classes do admin, que seguem servindo até a Fase 5.

   Nenhuma cor aqui — só token. Vidro só na moldura.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════ MOLDURA — e SÓ ela leva vidro ═══════════
   "Liquid Glass forms a distinct functional layer for controls and navigation elements —
   like tab bars and sidebars — that floats above the content layer." (HIG, Materials)
   E, com todas as letras: "Don't use Liquid Glass in the content layer." */
.cl-moldura{
  background:var(--vidro);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
/* O material da Apple muda de aparência sozinho quando a pessoa liga Reduzir Transparência
   ou Aumentar Contraste. O nosso precisa ser mandado. Sem isto, vira vidro decorativo —
   que é o contrário da intenção, e atrapalha justamente quem mais precisa. */
@media (prefers-reduced-transparency: reduce){
  .cl-moldura{ background:var(--superficie); -webkit-backdrop-filter:none; backdrop-filter:none }
}
@media (prefers-contrast: more){
  .cl-moldura{ background:var(--superficie); -webkit-backdrop-filter:none; backdrop-filter:none;
               border-color:var(--texto-3) }
}

/* ═══════════ CASCA ═══════════ */
.cl{
  font-size:17px;          /* o padrão do iOS. O painel rodava 14, abaixo do mínimo da plataforma */
  line-height:1.45;
  padding-block-end:calc(74px + env(safe-area-inset-bottom));
}
@media (min-width:900px){ .cl{ padding-block-end:48px; padding-inline-start:248px } }

.cl-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; padding-block-start:calc(10px + env(safe-area-inset-top));
  border-block-end:1px solid var(--linha);
}
@media (min-width:900px){ .cl-header{ padding-inline:32px } }

/* O logo do cliente: altura fixa, largura livre — logo de cliente vem em proporção
   imprevisível. Quem não tem arquivo recebe as iniciais, nunca imagem quebrada. */
.cl-marca{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--superficie-2); color:var(--texto-2); font-weight:600; font-size:14px;
  border:1px solid var(--linha); overflow:hidden }
.cl-marca img{ width:100%; height:100%; object-fit:contain }
.cl-conta{ flex:1; min-width:0 }
.cl-conta b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cl-conta span{ font-size:13px; color:var(--texto-3) }

.cl-periodo{ flex:none; display:flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  border-radius:999px; border:1px solid var(--linha); background:var(--superficie);
  color:var(--texto-2); font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background var(--curva) var(--dur-rapida) }
.cl-periodo:hover{ background:var(--superficie-2) }
.cl-periodo:focus-visible{ outline:2px solid var(--acento-texto); outline-offset:2px }

.cl-ic{ width:18px; height:18px; flex:none; fill:currentColor }
.cl-ic-traco{ fill:none; stroke:currentColor }

.cl-main{ max-width:720px; margin-inline:auto; padding:0 20px }
@media (min-width:900px){ .cl-main{ margin-inline:0; padding-inline:32px } }

/* ═══════════ HERÓI ═══════════
   Não é card: fica direto sobre o fundo, e é tipografia. É o único lugar da tela onde o
   desenho levanta a voz — todo o resto fica quieto. O número mora DENTRO da frase porque a
   cliente não fala "ROAS"; ela pergunta se o dinheiro voltou. */
.cl-heroi{ padding:34px 2px 30px; max-width:19ch }
@media (min-width:900px){ .cl-heroi{ max-width:26ch; padding-block:44px 34px } }
.cl-heroi p{ font-size:clamp(25px,6.4vw,33px); line-height:1.24; letter-spacing:-.022em;
  font-weight:500; color:var(--texto-2) }
.cl-heroi .cl-valor{ display:block; font-size:clamp(54px,15vw,76px); line-height:1.02;
  letter-spacing:-.045em; font-weight:600; color:var(--texto);
  font-variant-numeric:tabular-nums; margin:6px 0 4px }
/* `display:block`, não flex. Com flex, uma frase de apoio longa quebra em COLUNAS em vez de
   em linhas — medido na aba Criativos, onde a frase é maior que a do Resumo. O selo dentro
   dela já é inline-flex e alinha sozinho. */
.cl-heroi .cl-contra{ display:block; margin-top:16px; font-size:15px; color:var(--texto-3);
  line-height:1.45; max-width:34ch }
.cl-heroi .cl-contra .cl-subiu,
.cl-heroi .cl-contra .cl-caiu{ vertical-align:-2px }
.cl-subiu{ display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--ok-texto) }
.cl-caiu{ display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--erro-texto) }

/* ═══════════ APOIO — lista agrupada, não três cartões ═══════════
   Padrão nativo de iOS para dado relacionado. Três cartões arredondados iguais lado a lado é
   o kit de SaaS genérico, e foi o que deixou a tela antiga com dez caixas e nenhuma hierarquia. */
.cl-grupo{ background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-3);
  overflow:hidden }
.cl-grupo .cl-linha{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 18px; border-block-end:1px solid var(--linha-suave) }
.cl-grupo .cl-linha:last-child{ border-block-end:none }
.cl-grupo .cl-rot{ font-size:16px; color:var(--texto-2) }   /* sem caixa-alta: atrapalha ler */
.cl-grupo .cl-rot small{ display:block; font-size:13px; color:var(--texto-3) }
.cl-grupo .cl-val{ font-size:18px; font-weight:600; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap }
.cl-grupo .cl-val small{ display:block; font-size:13px; font-weight:400; color:var(--texto-3);
  letter-spacing:0; margin-top:2px }

.cl-secao{ margin-top:26px }
.cl-secao > h2{ font-size:20px; font-weight:600; letter-spacing:-.018em; margin-bottom:10px }

/* ═══════════ GRÁFICO ═══════════
   Uma frase ANTES da linha: "Aid comprehension by adding descriptive text... brief
   descriptive text that serves as a headline or summary" (HIG, Charting data). É como o app
   Tempo escreve "Chance de chuva fraca na próxima hora" acima do gráfico — a cliente lê a
   conclusão em vez de interpretar a curva. */
.cl-cartao{ background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-3);
  padding:18px }
.cl-resumo-graf{ font-size:16px; color:var(--texto-2); margin-bottom:4px; max-width:46ch }
.cl-resumo-graf b{ color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums }
.cl-legenda{ display:flex; gap:18px; margin:14px 0 10px; font-size:14px; color:var(--texto-2);
  flex-wrap:wrap }
.cl-legenda span{ display:inline-flex; align-items:center; gap:7px }
.cl-chave{ width:11px; height:11px; border-radius:3px; flex:none }
.cl-fig{ position:relative; margin:0 }
.cl-graf{ display:block; width:100%; height:auto; overflow:visible }
.cl-grade{ stroke:var(--linha); stroke-width:1 }
.cl-eixo{ fill:var(--texto-3); font-size:11px; font-variant-numeric:tabular-nums }
.cl-dica{ position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  background:var(--texto); color:var(--fundo); border-radius:var(--r-1); padding:8px 11px;
  font-size:13px; line-height:1.4; white-space:nowrap; transition:opacity .12s var(--curva);
  font-variant-numeric:tabular-nums; z-index:5 }
.cl-dica b{ font-weight:600 }
.cl-dica.cl-on{ opacity:1 }

/* ═══════════ DETALHE RECOLHIDO ═══════════
   "Use progressive disclosure to make layouts cleaner" (HIG, Layout). Os seis números aqui
   são razão dos três de cima — continuam existindo, param de disputar atenção.
   <details> nativo: teclado e leitor de tela de graça, sem uma linha de JS. */
.cl-detalhe{ margin-top:26px; background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r-3); overflow:hidden }
.cl-detalhe summary{ display:flex; align-items:center; gap:10px; min-height:52px; padding:0 18px;
  cursor:pointer; font-size:16px; font-weight:500; list-style:none }
.cl-detalhe summary::-webkit-details-marker{ display:none }
.cl-detalhe summary:focus-visible{ outline:2px solid var(--acento-texto); outline-offset:-2px }
.cl-detalhe summary .cl-seta{ margin-inline-start:auto; transition:transform .2s var(--curva);
  color:var(--texto-3) }
.cl-detalhe[open] summary .cl-seta{ transform:rotate(90deg) }
.cl-detalhe[open] summary{ border-block-end:1px solid var(--linha-suave) }
.cl-detalhe .cl-grupo{ border:none; border-radius:0 }

/* ═══════════ NAVEGAÇÃO ═══════════
   Aqui NÃO há regra nenhuma, e isso é o achado que mais vale deste arquivo.

   Eu tinha escrito um bloco `.cl-nav` inteiro — barra de abas no telefone virando sidebar no
   desktop, 56px de alvo, foco visível, o pacote. Ele nunca rodou uma vez: o painel usa
   `.tabbar` (dentro de media query) para o telefone e `#view-app{display:flex}` + `.sidebar`
   para o desktop. Nada no HTML ou no JS cita `.cl-nav`.

   Descoberto pela vitrine (`public/_vitrine.html`), que reproduziu a navegação e mostrou o
   conteúdo passando POR BAIXO da sidebar — comportamento que produção não tem, porque
   produção usa outro elemento. CSS que ninguém aplica não dá erro: só engorda o arquivo e
   mente sobre o que existe, que é exatamente a dívida que este redesign veio pagar.

   A navegação do cliente é vestida mais acima, em `[data-area="cliente"] .tabbar`. */

.cl-nota{ margin:30px 2px 0; font-size:13.5px; color:var(--texto-3); max-width:52ch }

/* Movimento só responde a ação de gente; quem pediu menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce){
  .cl *, .cl-nav *, .cl-header *{ transition:none !important; animation:none !important }
}

/* ═══════════ A MARCA DA CONTA NO CABEÇALHO COMPARTILHADO ═══════════
   O header é o mesmo do admin, então a marca entra como um espaço que só o cliente
   preenche — e que colapsa quando está vazio, para não abrir buraco no admin. */
.h-marca:empty{ display:none }
.h-marca{ flex:none; margin-inline-end:2px }
.h-marca .cl-marca{ width:32px; height:32px; font-size:13px }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   A MOLDURA DO PAINEL, VESTIDA PARA O CLIENTE

   O header e a barra de abas são COMPARTILHADOS com o admin — os mesmos elementos, o mesmo
   JS (toggleMenu, goNav, o seletor de período). Reconstruí-los só para o cliente duplicaria
   navegação, que é justamente o tipo de dívida que este redesign veio pagar.

   Então não se reconstrói: veste-se. Tudo aqui é escopado em `[data-area="cliente"]`, que o
   `estado.js` carimba no <html> ao saber quem entrou. O admin não enxerga nada disto, e a
   Fase 5 decide o que aproveitar.

   A barra do cliente já tinha as quatro abas que a spec pede — Resumo, Criativos, Canais e
   Estoque —, filtradas por `data-papeis`. Não foi preciso mexer numa linha de HTML.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root[data-area="cliente"] .header{
  background:var(--vidro);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-block-end:1px solid var(--linha);
  padding-block-start:calc(18px + env(safe-area-inset-top));
}
/* O título vinha BRANCO: no bloco `c2` o header do cliente era escuro, e a cor ficou colada
   nele. Medido na tela: rgb(255,255,255) sobre vidro claro — invisível. Aqui ele volta a ler
   o token, como tudo o mais. */
:root[data-area="cliente"] .h-title{ font-size:20px; font-weight:600; letter-spacing:-.02em;
  color:var(--texto) }

/* Mesma herança, mesmo conserto: o botão de período era claro sobre header escuro. */
:root[data-area="cliente"] .pcal{
  background:var(--superficie); border:1px solid var(--linha); color:var(--texto-2);
  min-height:44px; border-radius:999px; font-size:14px; font-weight:500;
}
:root[data-area="cliente"] .pcal:hover{ background:var(--superficie-2) }
:root[data-area="cliente"] .pcal.on{ border-color:var(--acento-texto); color:var(--acento-texto) }
:root[data-area="cliente"] .pcal:focus-visible{ outline:2px solid var(--acento-texto); outline-offset:2px }
:root[data-area="cliente"] .pmenu{ background:var(--superficie); border:1px solid var(--linha) }
:root[data-area="cliente"] .pmenu button{ color:var(--texto-2) }
:root[data-area="cliente"] .pmenu button:hover{ background:var(--superficie-2) }
:root[data-area="cliente"] .h-sub{ font-size:13.5px; color:var(--texto-3) }
:root[data-area="cliente"] .wrap{ font-size:17px; line-height:1.45 }

/* A barra de abas: camada funcional, logo leva vidro. Alvo de 56px — acima dos 44pt. */
:root[data-area="cliente"] .tabbar{
  background:var(--vidro);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-block-start:1px solid var(--linha);
  padding-block-end:env(safe-area-inset-bottom);
}
:root[data-area="cliente"] .tabbar .tab{
  min-height:56px; color:var(--texto-3); font-size:11.5px; font-weight:500;
}
:root[data-area="cliente"] .tabbar .tab.on{ color:var(--acento-texto); background:none }
:root[data-area="cliente"] .tabbar .tab:focus-visible{
  outline:2px solid var(--acento-texto); outline-offset:-3px; border-radius:var(--r-1);
}

/* A sidebar do desktop também é camada funcional. Ela é escura por conta própria desde o
   bloco `c2`; aqui ela passa a ler os tokens da moldura, e a Fase 4b/5 decide o vidro. */
@media (min-width:1024px){
  :root[data-area="cliente"] .sidebar{
    background:var(--moldura); border-inline-end:1px solid var(--moldura-linha);
  }
}

/* Movimento: só o que responde a ação de gente. */
@media (prefers-reduced-motion: reduce){
  :root[data-area="cliente"] *{ transition:none !important; animation:none !important }
}

/* O botão flutuante de período do celular (#fab-periodo) vinha com #0a1520 cravado, uma das
   cores da cauda. Achado na tela: ele é o único controle que continuava escuro depois de o
   header virar vidro claro, e ficava parecendo de outro aplicativo. */
:root[data-area="cliente"] #fab-periodo{
  background:var(--superficie); color:var(--texto-2);
  border:1px solid var(--linha); box-shadow:0 2px 10px rgb(0 0 0 / .08);
  min-height:44px;
}
:root[data-area="cliente"] #fab-periodo:hover{ background:var(--superficie-2) }
:root[data-area="cliente"] #fab-periodo:focus-visible{
  outline:2px solid var(--acento-texto); outline-offset:2px;
}