/* Identidade visual CEDRIX na SUITE INTERNA — tema CLARO (desde 29/07/2026).
   Contrato de marca: `17-Site 3D Cedrix/DESIGN.md` — é a autoridade, não este arquivo.
   Fontes: Inter (corpo) + Georgia (títulos). CSS próprio (sem CDN).

   DOIS MUNDOS, de propósito (emenda ao contrato em 29/07):
     • suíte interna (Intranet, Splitter, Ficha) = fundo CLARO — ferramenta aberta o dia
       todo sob luz de escritório;
     • site (17) e app do assessor (18) = fundo ESCURO — marketing e uso em rajadas.
   A marca é a mesma nos dois: cedro, ouro, madeira. Muda a luminosidade, não a paleta.
   Branco puro (#fff) segue PROIBIDO como fundo — o canvas é cream #f2efe9.

   Histórico: era bege (#F5F2EA/#014038/#769B3E) até 28/07; foi para o escuro naquele dia
   e voltou para claro em 29/07, agora com a paleta Cedrix e não com a antiga.

   ACENTO COMO TEXTO PRECISA DO PASSO ESCURO. Sobre cream, o ouro da marca (#d4a857) dá
   1,92:1 e reprova AA; por isso existem `--ouro-texto`, `--leaf` e `--madeira` em versão
   escurecida, todas medidas em >=4,6:1. Ouro puro só como PREENCHIMENTO, com texto
   `--sobre-ouro` por cima.

   NOMES: use os semânticos (--fundo/--superficie/--texto/--borda). Os antigos
   (--offwhite/--branco/--grafite/--oliva) seguem como aliases e, no tema claro, voltaram
   a fazer sentido — mas continuam sendo aliases.

   FONTE DA VERDADE compartilhada: copiado IDÊNTICO para
   15-Splitter/portal/app/static/copaiba.css e 17-Site 3D Cedrix/demo/assets/copaiba.css
   (a Ficha 14 replica tokens inline). Ao editar aqui, re-copiar para os três. */
:root {
  /* --- paleta Cedrix, TEMA CLARO (29/07/2026) --- */
  /* A suite interna usa fundo CLARO; o site (17) e o app do assessor (18) seguem
     ESCUROS. Justificativa: cena de uso. Ferramenta de trabalho aberta o dia todo sob
     luz de escritorio nao e a mesma cena de uma landing page ou de um app de celular
     usado em rajadas. O contrato de marca (17/DESIGN.md) foi EMENDADO para permitir os
     dois mundos -- nao furado em silencio.
     Branco puro (#fff) continua PROIBIDO como fundo: o canvas e cream. */
  --cedar: #1f4d3a;        /* verde cedro — marca; segue sendo a faixa da topbar */
  --cedar-2: #16382a;
  --sobre-ouro: #2a1e08;   /* texto sobre ouro: SEMPRE este */
  --ouro: #d4a857;         /* ouro como PREENCHIMENTO (botao) — texto por cima e escuro */
  --ouro-2: #b8863c;
  /* Acento como TEXTO precisa de passo escuro: sobre cream, #d4a857 da 1,92:1 e
     REPROVA. Estes foram derivados na mesma matiz e medidos (>=4,6:1). */
  --ouro-texto: #975e00;
  --leaf: #117b4f;         /* folha escurecida — links e enfase (4,61:1) */
  --leaf-2: #0d6741;
  --madeira: #a45800;      /* 4,60:1 */

  /* --- semantica de interface --- */
  --fundo: #f2efe9;        /* canvas cream (NAO branco puro) */
  --superficie: #fbfaf7;   /* cards, inputs, tabelas — um passo acima do canvas */
  --superficie-2: #eae6dd; /* cabecalho de tabela, summary — um passo abaixo */
  --texto: #1a231e;        /* 14,04:1 */
  --texto-fraco: #5c6862;  /* 5,07:1 */
  --borda: #ddd8cc;
  --borda-int: #b9b3a4;
  --placeholder: #8a8578;  /* 3,53:1 sobre superficie (minimo 3:1 p/ placeholder) */
  --alerta: #b24b09;       /* 4,69:1 */
  --ok: var(--leaf);
  --sombra: 0 1px 3px rgba(31,77,58,.10), 0 1px 2px rgba(31,77,58,.06);
  /* Tintas: no claro sao veus CLAROS da propria cor, com o texto na versao escura.
     Repetir a receita do tema escuro (alfa baixo de cor clara) daria mancha invisivel. */
  --tinta-leaf: rgba(17,123,79,.10);
  --tinta-ouro: rgba(151,94,0,.12);
  --tinta-alerta: rgba(178,75,9,.10);
  --tinta-neutra: rgba(26,35,30,.06);

  /* --- ALIASES LEGADOS (os nomes voltaram a fazer sentido no claro) --- */
  --verde: var(--cedar);
  --verde-2: var(--cedar-2);
  --oliva: var(--leaf);
  --oliva-esc: var(--leaf-2);
  --offwhite: var(--fundo);
  --grafite: var(--texto);
  --cinza: var(--texto-fraco);
  --branco: var(--superficie);
  --verde2: var(--leaf-2);
  --tinta: var(--texto);
  --linha: var(--borda);
  --erro: var(--alerta);
  --cream-solido: #f2efe9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', Helvetica, sans-serif;
  color: var(--grafite);
  background: var(--offwhite);
  line-height: 1.5;
}
h1, h2, h3, .brand-title { font-family: Georgia, serif; color: var(--texto); font-weight: 600; }
h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; }
a { color: var(--leaf); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar unificada (Intranet, Splitter portal/admin; a Ficha replica inline) */
.topbar {
  display: flex; align-items: center; gap: 22px;
  background: var(--cedar); color: var(--cream-solido);
  padding: 10px 22px; box-shadow: var(--sombra);
}
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { height: 34px; width: auto; display: block; }
.topbar .mod {
  color: rgba(242,239,233,.6); font-size: 15px; font-weight: 400;
  margin-left: -8px; padding-left: 14px; border-left: 1px solid rgba(242,239,233,.22);
  white-space: nowrap;
}
/* `nowrap` + rolagem: com `flex-wrap: wrap` a nav QUEBRAVA em 2–4 linhas conforme o número
   de links do módulo, e como cada app tem uma quantidade diferente, a altura da barra e a
   posição do "powered by"/usuário mudavam de tela para tela — era isso que fazia a topbar
   parecer não-padronizada (achado em 01/08/2026, medindo as barras renderizadas lado a lado). */
.topbar nav { display: flex; gap: 18px; margin-left: 8px; margin-right: auto;
  flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { color: rgba(242,239,233,.85); font-weight: 500; font-size: 14px;
  white-space: nowrap; }
.topbar nav a:hover { color: var(--texto); text-decoration: none; }
/* `margin-right:auto` na nav é o que empurra powered+user p/ a direita. NÃO usar
   `margin-left:auto` nos DOIS (powered e user): o espaço livre se divide entre eles e a
   posição varia com o tamanho da nav. */
.topbar .user { display: flex; align-items: center; gap: 14px; font-size: 13.5px;
  white-space: nowrap; }
.topbar .user span { color: rgba(242,239,233,.9); }

/* `.topbar-light` — o nome voltou a ser honesto em 29/07: no tema claro ela E uma
   faixa clara (superficie sobre o canvas), como era na era bege. */
.topbar.topbar-light { background: var(--superficie); color: var(--texto); border-bottom: 1px solid var(--borda); }
.topbar-light .mod { color: var(--texto-fraco); margin-left: -4px; padding-left: 20px; border-left-color: var(--borda); }
.topbar-light nav a { color: var(--texto); }
.topbar-light nav a:hover { color: var(--leaf); }
.topbar-light .user span { color: var(--texto); }
.topbar-light .btn-sm { background: var(--ouro); color: var(--sobre-ouro); }
.topbar-light .btn-sm:hover { background: var(--ouro-2); }
/* Janela estreita: aperta a nav e reduz a assinatura em vez de deixar link cortado.
   Medido em 01/08/2026 — o pior caso (Splitter/gestor, 5 links) precisa de ~1030px; abaixo
   disso estes ajustes devolvem ~140px, o suficiente para tudo caber. */
@media (max-width: 1100px) {
  .topbar { gap: 14px; padding: 10px 16px; }
  .topbar nav { gap: 12px; }
  .topbar nav a { font-size: 13.5px; }
  .powered { font-size: 0; gap: 0; }              /* esconde "powered by", mantém a marca */
  .powered .lockup { font-size: 11.5px; }
  .powered .mark { height: 22px; }
  .powered b { font-size: 14px; }
}

/* Assinatura do FORNECEDOR (decisao de 30/07/2026 — ver PRODUCT.md).
   Sao DUAS marcas com papeis diferentes, e a hierarquia e o que comunica isso: o
   escritorio CLIENTE fica a esquerda, primeiro, com 34px; a Cedrix assina como
   plataforma, a 26px. Nao igualar os tamanhos — marca de fornecedor do tamanho da do
   cliente le como co-propriedade do produto, que e exatamente o que a venda a outros
   escritorios nao pode sugerir.
   Estava inline no base.html do 16 e por isso a demo (que usa a mesma classe) renderizava
   a atribuicao como texto cru. Aqui vale para toda a suite de uma vez. */
.powered { display: inline-flex; align-items: center; gap: 8px; margin-left: 0;
  font-size: 11.5px; color: var(--texto-fraco); white-space: nowrap; }
.powered .lockup { display: inline-flex; align-items: center; gap: 6px; }
/* height + width:auto: o simbolo e alto (124x179), nunca deixar esticar */
.powered .mark { height: 26px; width: auto; display: block; }
.powered b { font-family: Georgia, serif; font-weight: 600; color: var(--cedar);
  font-size: 15px; letter-spacing: .3px; }

.container { max-width: 1100px; margin: 0 auto; padding: 28px 22px; }
.page-head { margin-bottom: 18px; }
.page-head p { color: var(--cinza); margin: 4px 0 0; }

/* Cards de ferramentas */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tool-card {
  display: block; background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: 20px; box-shadow: var(--sombra); transition: transform .08s ease, box-shadow .12s ease;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31,77,58,.14); text-decoration: none; }
.tool-card .icon { font-size: 30px; line-height: 1; }
.tool-card h3 { margin: 12px 0 6px; }
.tool-card p { margin: 0; color: var(--cinza); font-size: 14px; }
.tool-card.soon { opacity: .6; box-shadow: none; }
.tool-card.soon:hover { transform: none; box-shadow: none; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.badge.own { background: var(--tinta-leaf); color: var(--leaf); }
.badge.all { background: var(--tinta-ouro); color: var(--ouro-texto); }
.badge.soon { background: var(--tinta-neutra); color: var(--texto-fraco); }
.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); margin: 30px 0 12px; }

/* Lista de CONFIGURAÇÕES da home (05/08/2026) — deliberadamente mais QUIETA que os
   `.tool-card`. A home era uma pilha única, e configuração que se ajusta uma vez por
   semestre ("Comissões · Admin", "Usuários") vinha no mesmo card grande da ferramenta de
   uso diário: rótulo novo em duas pilhas iguais não teria resolvido nada. Daí ícone de
   18px em vez de 30, sem sombra e sem `translateY` no hover — o realce é só a borda.
   Duas colunas; o bloco de 760px colapsa para uma. */
.cfg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 10px;
  color: inherit; transition: border-color .12s ease;
}
/* `a { color: var(--leaf) }` pintaria o item inteiro de verde, e `a:hover` o sublinharia
   por completo — daí o `color: inherit` acima e o `text-decoration: none` aqui. */
.cfg-item:hover { border-color: var(--leaf); text-decoration: none; }
.cfg-item .icon { font-size: 18px; line-height: 1.4; flex: 0 0 auto; }
.cfg-item .txt { color: var(--cinza); font-size: 13px; line-height: 1.45; min-width: 0; }
.cfg-item .txt strong { display: block; color: var(--texto); font-size: 14.5px; font-weight: 600; }

/* Login — o logo fica FORA do cartão, sobre o canvas */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--verde); padding: 24px; }
/* `.auth-light` — canvas cream com o cartao um passo acima. E o login da Intranet. */
.auth-wrap.auth-light { background: var(--offwhite); }
.auth-col { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 380px; }
.auth-logo img { height: 64px; width: auto; display: block; }

/* Chip cream atras de logo com texto escuro (o do Grupo Copaiba). Sobre o canvas (tambem
   cream) fica invisivel; sobre o cedro do login protege o logo. Uma regra serve nos dois
   fundos. Aplica-se so a quem carrega a classe logo-chip: Splitter e Ficha, cujo logo e
   texto-branco, nao usam.
   NAO escrever tag de imagem literal neste comentario: o detector de design le o CSS como
   texto e acusa "broken-image" a cada edicao do arquivo (aconteceu 3x em 30/07/2026). */
.logo-chip { background: var(--cream-solido); border-radius: 10px; box-shadow: 0 1px 3px rgba(31,77,58,.14); }
.topbar .brand img.logo-chip { height: 30px; padding: 6px 11px; }
.auth-logo img.logo-chip { height: 56px; padding: 12px 18px; border-radius: 16px; }
.auth-card { background: var(--branco); border-radius: 16px; padding: 36px; width: 100%; box-shadow: 0 10px 30px rgba(31,77,58,.18); }
.auth-card h1 { font-size: 20px; text-align: center; margin: 0 0 20px; }

/* Formulários */
label { display: block; font-size: 13px; font-weight: 500; color: var(--grafite); margin: 12px 0 4px; }
input, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: var(--branco); color: var(--grafite);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus { outline: none; border-color: var(--borda-int); box-shadow: 0 0 0 3px rgba(17,123,79,.18); }
.btn {
  display: inline-block; background: var(--ouro); color: var(--sobre-ouro); border: none;
  padding: 10px 18px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s ease;
}
.btn:hover { background: var(--ouro-2); text-decoration: none; }
.btn.block { width: 100%; }
.btn-sm { font-size: 13px; padding: 6px 12px; border-radius: 6px; background: rgba(242,239,233,.14); color: var(--texto); }
.btn-sm:hover { background: rgba(242,239,233,.24); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--texto); border: 1px solid var(--borda-int); }

/* Tabela de DESATIVADOS (05/08/2026) — mesma estrutura, tom apagado. O estado "sem acesso"
   tem de se ler de longe, mas não é erro (é escolha do gestor), então nada de vermelho: só
   um véu neutro na linha e o texto no tom fraco, com o badge "Desativado" na coluna Status.
   Os campos de código/vertical seguem editáveis — quem reativa costuma corrigir cadastro. */
.tabela-inativos tbody tr { background: var(--tinta-neutra); }
.tabela-inativos tbody td { color: var(--texto-fraco); }
.tabela-inativos tbody td input, .tabela-inativos tbody td select { color: var(--texto-fraco); }
/* O badge precisa de fundo OPACO só aqui: `.badge.soon` é um véu translúcido, e sobre a
   linha já acinzentada o par media 4,43:1 — reprovava AA (4,5) por pouco, e a 11px não há
   isenção de "texto grande". Com a superfície clara volta a 5,07:1 sem perder o tom quieto
   (escurecer o texto para --texto passaria, mas faria o badge gritar mais que a linha). */
.tabela-inativos .badge.soon { background: var(--superficie); }

/* Ações na linha da tabela (05/08/2026) — ver CLAUDE.md, seção "Ações de linha".
   Antes, "Desativar" e "Resetar senha" eram `.btn-sm` com `style="background:var(--verde)"`
   e `var(--oliva)` cravado no template. Mas o `.btn-sm` tem `color: var(--texto)`, que é
   QUASE PRETO (#1a231e): medido nos botões renderizados, isso dava **1,67:1** sobre o cedro
   e **3,05:1** sobre a folha — ilegível, reprovando AA (4,5:1) de longe. Depois da correção,
   15,44:1 nos neutros e 5,15:1 no destrutivo (4,69:1 preenchido, no hover).
   É herança da era bege, quando o `.btn-sm` tinha texto
   claro; a repintura Cedrix trocou o texto e os dois `style=` inline ficaram para trás.
   A correção não é só clarear o texto: três botões saturados POR LINHA fariam a tabela
   gritar. São botões de CONTORNO, e a cor fica reservada ao que destrói. */
.btn-sm.acao, .btn-sm.perigo {
  background: var(--superficie); border: 1px solid var(--borda-int); font-weight: 500;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-sm.acao { color: var(--texto); }                    /* 14,04:1 */
.btn-sm.acao:hover { background: var(--superficie-2); border-color: var(--texto-fraco); }
/* Destrutivo: contorno de alerta em repouso (4,69:1) e PREENCHIDO só no hover — o
   preenchimento chega no gesto, não na leitura da tabela. */
.btn-sm.perigo { color: var(--alerta); border-color: rgba(178,75,9,.45); }
.btn-sm.perigo:hover { background: var(--alerta); color: var(--cream-solido); border-color: var(--alerta); }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.alert.err { background: var(--tinta-alerta); color: var(--alerta); border: 1px solid rgba(178,75,9,.28); }
.alert.info { background: var(--tinta-leaf); color: var(--leaf); border: 1px solid rgba(17,123,79,.25); }

/* Tabelas */
table { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); font-size: 14px; }
th { background: var(--superficie-2); color: var(--cedar); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.muted { color: var(--cinza); }
.right { text-align: right; }

/* iframe de ferramenta */
.tool-frame { width: 100%; height: calc(100vh - 160px); border: 1px solid var(--borda); border-radius: 10px; background: var(--branco); }

/* utilitário */
.stack > * + * { margin-top: 10px; }
.inline-form { display: inline; }

/* ============================== Splitter =====================================
   Vocabulário do portal/admin do Splitter (ex-style.css) na paleta oficial.
   Regras que colidem com elementos da Intranet ficam escopadas em .app-splitter
   (classe no <body> do base.html do Splitter). */
.conteudo { max-width: 1080px; margin: 26px auto; padding: 0 20px; }
.rodape { max-width: 1080px; margin: 30px auto; padding: 0 20px; color: var(--cinza); font-size: 12px; }

.card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 26px; box-shadow: var(--sombra); }
.estreito { max-width: 420px; margin: 8vh auto; }
.sub { color: var(--cinza); font-size: 14px; margin: 0 0 18px; }
.erro { color: var(--alerta); font-size: 14px; }

.cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.comp { color: var(--cinza); font-size: 13px; }
.cab select, .comp select { width: auto; padding: 6px 10px; }

.kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.kpi { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 20px; flex: 1; min-width: 220px; box-shadow: var(--sombra); }
.kpi.destaque { background: var(--cedar); color: var(--cream-solido); border-color: var(--cedar); }
.kpi .rot { display: block; font-size: 12px; opacity: .8; }
.kpi .val { display: block; font-size: 24px; font-weight: 700; margin-top: 4px; }

.bloco { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra); }
.cont { color: var(--cinza); font-weight: 400; font-size: 13px; }

/* tabelas do Splitter vivem DENTRO de card/bloco/cat — sem "moldura" própria */
.card table, .bloco table, .cat table, table.mini, table.hist {
  box-shadow: none; border-radius: 0; background: transparent;
}
.app-splitter th, .app-splitter td { padding: 8px 10px; font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.mini td { border: 0; padding: 4px 10px; }
.mini td.num { color: var(--cedar); font-weight: 600; }
.tabela-scroll { max-height: 460px; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; }
.tabela-scroll thead th { position: sticky; top: 0; background: var(--superficie-2); }

/* botões do Splitter: <button> "bare" nos forms (100% no login/admin; auto nas linhas) */
.app-splitter button {
  margin-top: 16px; width: 100%; padding: 11px; border: 0; border-radius: 8px;
  background: var(--ouro); color: var(--sobre-ouro); font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .12s ease;
}
.app-splitter button:hover { background: var(--ouro-2); }
.linha-botoes { margin-top: 8px; }
.app-splitter .linha-botoes button { width: auto; padding: 11px 20px; }
.app-splitter .mini-btn, .app-splitter button.mini-btn { width: auto; padding: 5px 12px; font-size: 12px; font-weight: 600; margin-top: 0; }

.banner { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner.ok { background: var(--tinta-leaf); color: var(--leaf); border: 1px solid rgba(17,123,79,.25); }
.banner.erro-b { background: var(--tinta-alerta); color: var(--alerta); border: 1px solid rgba(178,75,9,.28); }
textarea.code { width: 100%; min-height: 52vh; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; padding: 12px; border: 1px solid var(--borda); border-radius: 8px; white-space: pre; overflow: auto; }
tr.soon { color: var(--cinza); }
tr.soon td { font-style: italic; }
.num.up { color: var(--leaf); }
.num.down { color: var(--alerta); }

/* pill-links: btn-line p/ fundo claro; btn-ghost legível nos DOIS fundos
   (verde translúcido na topbar escura, contorno discreto no corpo) */
.btn-line { display: inline-block; color: var(--leaf); border: 1px solid var(--borda-int);
  padding: 3px 10px; border-radius: 6px; font-size: 13px; background: var(--branco); }
.btn-line:hover { background: var(--offwhite); text-decoration: none; }
.btn-ghost { display: inline-block; color: var(--texto); border: 1px solid var(--borda-int);
  padding: 4px 10px; border-radius: 6px; font-size: 13px; background: var(--branco); }
.btn-ghost:hover { background: var(--offwhite); text-decoration: none; }
.topbar .btn-ghost { color: var(--texto); border-color: rgba(242,239,233,.3); background: transparent; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.12); }
.app-splitter button.btn-ghost { width: auto; margin-top: 0; padding: 4px 10px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-int); font-size: 13px; font-weight: 400; }
.app-splitter button.btn-ghost:hover { background: var(--offwhite); }

/* detalhe por categoria (expansível, nativo) */
.cat { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.cat[open] { box-shadow: 0 1px 3px rgba(31,77,58,.10); }
.cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--superficie-2); font-size: 14px; }
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary::before { content: "▸"; color: var(--cinza); transition: transform .15s ease; }
.cat[open] > summary::before { transform: rotate(90deg); }
.cat .cat-nome { font-weight: 600; flex: 1; }
.cat .cat-cont { color: var(--cinza); font-size: 12px; white-space: nowrap; }
.cat .cat-sec { color: var(--cinza); font-size: 12px; white-space: nowrap; }
.cat .cat-val { color: var(--cedar); font-weight: 700; min-width: 120px; text-align: right; }
.cat table th { background: var(--branco); }
.cat table td, .cat table th { padding: 7px 14px; }

/* histórico mensal (barras) */
table.hist td { border: 0; padding: 6px 8px; vertical-align: middle; }
.hist-mes { color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-bar { width: 100%; }
.hist-bar span { display: block; height: 14px; border-radius: 4px; background: var(--oliva); min-width: 2px; }

/* ============================== CELULAR (02/08/2026) ==========================
   Antes disso a suíte só tinha o breakpoint de 1100px (que aperta a nav) e NADA para
   telefone. Medido em 375x812 com o app no ar: TODA tela pedia 710px de largura — a
   topbar, `nowrap` de ponta a ponta, esticava o viewport para 710 e empurrava a nav
   INTEIRA e o "Sair" para fora da tela; no telefone não havia como navegar nem sair.
   Somadas as tabelas largas, /ferramentas/chamados pedia 991px e /ferramentas/social 864.

   Duas regras que estas medições impõem:
     • a rolagem horizontal tem de ficar PRESA no elemento largo (tabela), nunca na
       página — página que rola de lado tira o texto do corpo da coluna de leitura;
     • grid de N colunas fixas em `style=` inline não é alcançável por media query. Por
       isso as telas usam `.grid-2`/`.grid-3` daqui, que colapsam sozinhos.

   São TRÊS breakpoints, e o mais alto existe por medição, não por gosto: em 900px a barra de
   uma linha já recortava "Permissões" e "Sugestões" (o CLAUDE.md registra que o pior caso —
   Splitter/gestor, 5 links — precisa de ~1030px). Esse defeito é ANTERIOR a este bloco e
   valia para tablet; por isso a barra passa a DUAS linhas a partir de 1030px, e não só no
   telefone. De 1030 a 761 a assinatura da Cedrix continua completa (sobra espaço na 2ª linha);
   as reduções de telefone entram em 760px e 480px.
   Como este arquivo é copiado para Splitter e demo, o bloco cobre o vocabulário dos DOIS
   apps e fica no FIM do arquivo de propósito (vence por ordem, sem precisar de !important). */

/* Contêiner de rolagem para tabela larga: a tabela rola AQUI dentro em vez de esticar a
   página. O `min-width` é o ponto não-óbvio: sem ele a tabela se comprime até caber e o
   texto quebra dentro da célula — em 375px "Ana Ficticia de Almeida Souza" virava 4 linhas
   e a linha da tabela ia a 155px de altura (5 usuários = 775px de rolagem vertical). Com um
   piso de 520px a mesma célula ocupa 2 linhas e a linha cai para ~78px: troca-se rolagem
   VERTICAL longa por um empurrão horizontal curto, que é o gesto natural numa tabela.
   520px e não `max-content`: em `max-content` as colunas de texto livre (a descrição do
   chamado, com 90 caracteres) sozinhas passariam de 600px. */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-wrap > table { margin-bottom: 0; min-width: 520px; }

/* Grids que colapsam. Substituem `display:grid;grid-template-columns:1fr 1fr` inline —
   que ficava travado em 2 colunas no telefone, com input de ~150px. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.grid-2-larga { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.grid-2-estreita { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }

@media (max-width: 1030px) {
  /* --- topbar em DUAS linhas: [logo · módulo · usuário] / [nav · assinatura] ---
     É GRID, não `flex-wrap`, e o motivo é medido: com wrap o navegador MOVE o item para a
     linha seguinte quando ele não cabe, em vez de encolher (o encolhimento só acontece entre
     itens já na mesma linha). Como o bloco do usuário é nowrap e mede ~290px, o wrap dava
     QUATRO linhas — logo / usuário / nav / assinatura, 300px de barra num aparelho de 812px —
     e o `text-overflow` nunca entrava em ação. O grid fixa quem vai em qual linha; as faixas
     `minmax(0,…)` são o que autoriza o encolhimento, e aí sim o nome ganha ellipsis.
     Papel e código continuam legíveis em /perfil. */
  /* 4 faixas, com posição EXPLÍCITA por linha/coluna. Faixas nomeadas não servem aqui: a
     largura de uma coluna é compartilhada pelas duas linhas, então a nav (linha 2) herdava
     a largura de logo+módulo e ficava recortada em "Início Usuári" — Permissões e Sugestões
     inalcançáveis. Com `grid-column` explícito a nav atravessa as colunas 1-3 e a assinatura
     ocupa a 4ª, sozinha. A coluna 3 é o `1fr` que sobra: é ela que o nome do usuário (linha 1)
     e a nav (linha 2) dividem. */
  .topbar {
    display: grid; align-items: center;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 8px; padding: 9px 14px;
  }
  .topbar .brand { grid-row: 1; grid-column: 1; }
  .topbar .brand img { height: 26px; }
  .topbar .brand img.logo-chip { height: 24px; padding: 5px 8px; }
  .topbar .mod { grid-row: 1; grid-column: 2; min-width: 0; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; }
  /* `justify-content:flex-end` e NÃO `justify-self:end`: com `justify-self` o item é medido
     pelo max-content (~290px), ignora a célula e transborda para a ESQUERDA — o nome ficava
     escrito por cima do logo. Ocupando a célula inteira, o `min-width:0` vale e o ellipsis
     do link finalmente entra em ação. */
  .topbar .user { grid-row: 1; grid-column: 3 / span 2; justify-content: flex-end;
    min-width: 0; gap: 9px; font-size: 12.5px; }
  .topbar .user a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Quem encolhe é o NOME, nunca o "Sair". Sem isto o botão entrava no rateio de encolhimento
     junto com o nome e virava "S…" no Splitter (onde o Sair é <a class="btn-sm">, e não um
     <form> como na intranet) — o único jeito de sair da suíte, ilegível. */
  .topbar .user .btn-sm, .topbar .user form, .topbar .user button { flex: 0 0 auto; }
  .topbar nav { grid-row: 2; grid-column: 1 / span 3; min-width: 0; margin: 0; gap: 16px; }
  /* `font-size:0` some com o texto "powered by" e deixa só o lockup (marca + nome), que tem
     tamanho próprio. Isto JÁ ERA a intenção do breakpoint de 1100px, mas lá nunca funcionou:
     a regra base `.powered { font-size: 11.5px }` está DEPOIS daquele @media no arquivo e,
     com a mesma especificidade, a última vence — então "powered by" aparecia inteiro no
     telefone, custando ~60px da barra. Aqui funciona porque este bloco é o último do arquivo.
     (A faixa de 1031-1100px segue com o defeito antigo; corrigir lá muda a aparência de uma
     largura que não é de celular, então ficou fora deste ajuste.) */
  .powered { grid-row: 2; grid-column: 4; justify-self: end; margin-left: 8px;
    font-size: 0; gap: 0; }

  /* 16px nos campos: com menos que isso o iOS DÁ ZOOM ao focar e a tela fica deslocada, com
     o campo fora de vista. Fica nesta faixa (e não só na de telefone) porque o iPad retrato
     tem 768px de largura e é toque igual — o zoom não olha a largura, olha o tamanho da fonte. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 760px) {
  /* A assinatura da Cedrix continua na barra, como MARCA (só o símbolo). Descartar o
     wordmark aqui é a mesma degradação progressiva que o breakpoint de 1100px já faz com
     o "powered by" — e é o que devolve os ~55px que faltavam para os 4 links da nav
     caberem sem rolagem. Papel de fornecedor preservado; ver PRODUCT.md. */
  .powered b { display: none; }

  .container { padding: 20px 14px 76px; }   /* 76px embaixo: o FAB de sugestão flutua ali */
  .conteudo { margin: 18px auto; padding: 0 14px 76px; }
  .rodape { margin: 20px auto; padding: 0 14px; }
  h1 { font-size: 20px; }

  /* Tabela: menos respiro por célula para caber mais coluna antes de precisar rolar. */
  th, td { padding: 8px 10px; font-size: 13.5px; }

  .grid-2, .grid-3, .grid-2-larga, .grid-2-estreita { grid-template-columns: 1fr; gap: 10px; }
  .cfg-list { grid-template-columns: 1fr; }

  /* Cards/KPIs: `min-width` fixo maior que a coluna era estouro garantido no telefone. */
  .tool-grid { grid-template-columns: 1fr; gap: 14px; }
  .tool-card { padding: 16px; }
  .kpi { min-width: min(220px, 100%); padding: 14px 16px; }
  .card { padding: 18px; }
  .estreito { margin: 4vh auto; }

  /* iframe de ferramenta: a topbar agora tem 2 linhas, então sobra menos altura. */
  .tool-frame { height: calc(100vh - 230px); min-height: 420px; }

  .auth-wrap { padding: 16px; }
  .auth-card { padding: 26px 20px; }
  .auth-logo img.logo-chip { height: 48px; padding: 10px 15px; }
}

@media (max-width: 480px) {
  /* Telefone estreito: o rótulo do módulo sai e devolve ~62px ao nome do usuário, que é o
     que decide entre "Bruno Exemplo Pereira · gestor" e "Bruno Exem…". A coluna do meio
     continua existindo no grid (vira 0) — o logo segue à esquerda e o usuário à direita. */
  .topbar .mod { display: none; }
  /* Aqui a nav PODE quebrar, e é de propósito. Medido: com gap 12 e 12,5px os 4 links da nav
     padrão ocupam ~300px, então até 390px eles ganham uma 2ª linha (barra de 98px) e de 430px
     para cima cabem numa só (barra de 81px). Quebrar é melhor que a alternativa: com `nowrap`
     + rolagem lateral, "Sugestões" só aparecia se a pessoa arrastasse a barra — link que
     ninguém acha. Nenhum link fica escondido em nenhuma largura de 320px a 1280px.
     (O `nowrap` do desktop segue valendo lá — ver o comentário da `.topbar nav`: a causa do
     wrap indesejado era o número VARIÁVEL de links por app, e a barra ficava de altura
     diferente em cada tela; no telefone a nav padrão tem 4 itens fixos e a altura é uniforme.) */
  .topbar nav { gap: 12px; flex-wrap: wrap; row-gap: 6px; }
  .topbar nav a { font-size: 12.5px; }
  .container { padding: 16px 12px 76px; }
  th, td { padding: 7px 9px; font-size: 13px; }
}