/* A PELE — a linguagem visual da caixa de "Cor e avatar" do Vixchat, trazida
 * para o GRPW (16/10/2026, pedido do usuário: experimentar primeiro no
 * Cadastro Simplificado de Pessoas, "para eu ver como fica").
 *
 * O QUE É: cantos arredondados (9px em botão e campo, 12px em cartão, 16px
 * em caixa), sombras suaves em camadas, cabeçalho num fundo levemente tingido
 * da cor da marca, rótulo de campo curto em maiúsculas, controle segmentado,
 * botão com retorno ao passar o mouse e anel de foco na cor da marca.
 * A referência é `~/vixchat-dev/comum/tema.css`.
 *
 * COMO LIGA: este arquivo é carregado em TODA página (`base.html`, depois do
 * `style.css` e do tema da Configuração de Tela), mas nada aqui vale sem a
 * classe `pele` no `<body>`. A tela que quer a pele declara
 *     {% block corpo_classe %}tela-compacta pele{% endblock %}
 * PARA DESLIGAR numa tela, tire a palavra `pele` dali. PARA LIGAR NO SISTEMA
 * INTEIRO, acrescente `pele` na linha do `<body>` do `base.html` — e rode
 * antes a revisão visual tela a tela (§14.14), porque só esta foi conferida.
 *
 * O QUE NÃO MEXE: MEDIDAS. A altura de 27px do campo (`teste_tela_compacta`),
 * a largura dos lookups, as colunas do formulário: tudo continua vindo do
 * `style.css`. A pele muda a cor, o canto, a sombra e a letra.
 *
 * COMO NÃO BRIGA COM O `style.css`: todo seletor começa por `:where(.pele)`,
 * que NÃO SOMA especificidade. Assim cada regra daqui pesa o mesmo que a
 * regra equivalente do `style.css` e vence só por vir depois — e perde para
 * as específicas, que existem por defeito corrigido. Onde o `style.css` tem
 * regra pesada demais para vencer (o bloco `.tela-compacta`, com sete
 * pseudo-classes), a pele NÃO sobe de peso: troca a VARIÁVEL que a regra lê
 * (`--radius`, `--input-bg`, `--input-border`, `--focus-glow`).
 *
 * AS CORES saem das variáveis que o GRPW já tem nos dois temas (`--panel`,
 * `--text`, `--text-muted`, `--border`, `--primary`, `--danger`...), que a
 * Configuração de Tela regrava. Nada de cor fixa: as cinco que o `style.css`
 * deixava fixas (#fafbfc no cabeçalho da grade, #eef1f5 na barra, #f7f8fa na
 * lupa...) clareavam o tema escuro, e aqui viram tons derivados.
 */

/* ------------------------------------------------------------ fichas */
:where(.pele) {
  /* O "papel": um tom abaixo do cartão — fundo de cabeçalho de grade, de
     campo travado, de controle segmentado. Misturar a TINTA no cartão dá
     o tom certo nos dois temas: escurece no claro, clareia no escuro. */
  --pele-papel: color-mix(in srgb, var(--text) 4%, var(--panel));
  --pele-papel-2: color-mix(in srgb, var(--text) 8%, var(--panel));
  --raio-p: 7px;  --raio: 9px;  --raio-m: 12px;  --raio-g: 16px;
  /* As sombras do tema ESCURO são mais fortes, senão somem no fundo — quem
     as declara é `gerar_css_tema()`, quando o cartão configurado é escuro. */
  --pele-sombra-1: var(--sombra-1, 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05));
  --pele-sombra-2: var(--sombra-2, 0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.09));
  --anel: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  --tingido: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--panel)),
                             var(--panel) 70%);
  /* Cores de SELO legíveis nos dois temas: a cor da marca misturada à
     tinta escurece no claro e clareia no escuro (o verde de sucesso do
     sistema é fixo, #1e6b3a, e sumia sobre o cartão escuro). */
  --pele-ok: color-mix(in srgb, var(--success-text) 60%, var(--text));
  --pele-acento: color-mix(in srgb, var(--primary) 80%, var(--text));
  --pele-alerta: color-mix(in srgb, #b45309 80%, var(--text));

  /* As variáveis que o `style.css` JÁ LÊ — trocá-las aqui é o que veste
     campo, botão e lupa sem disputar especificidade com o bloco compacto. */
  --radius: var(--raio);
  --focus-glow: color-mix(in srgb, var(--primary) 28%, transparent);
}

/* ------------------------------------------------------------ painel */
/* O PAINEL é o cartão da tela: canto de cartão e sombra que o descola do
   fundo (a imagem de fundo do sistema atravessava a borda de 1px). */
:where(.pele) .panel {
  border-radius: var(--raio-m);
  box-shadow: var(--pele-sombra-2);
}
/* O CABEÇALHO no fundo tingido, como o topo da caixa de Avatar. */
:where(.pele) .panel__head {
  background: var(--tingido);
}
:where(.pele) .panel__head h1 { font-weight: 700; letter-spacing: -.01em; }

/* ------------------------------------------------------------ botões */
:where(.pele) .btn,
:where(.pele) .barra-ferramentas-btn,
:where(.pele) .lookup-generico-botao {
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s,
              transform .08s;
}
:where(.pele) .btn:active:not(:disabled),
:where(.pele) .barra-ferramentas-btn:active { transform: translateY(1px); }
:where(.pele) .btn:focus-visible,
:where(.pele) .barra-ferramentas-btn:focus-visible,
:where(.pele) .lookup-generico-botao:focus-visible {
  outline: none; box-shadow: var(--anel);
}
:where(.pele) .btn--primary {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
:where(.pele) .btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 86%, #000);
}
/* O `<button class="btn">` não herda a fonte (o navegador dá a dele ao
   botão): o "Pesquisar" da barra de busca saía menor e noutra letra que o
   "Limpar" ao lado, que é `<a>`. */
:where(.pele) button.btn { font-family: inherit; }
/* O SECUNDÁRIO responde na cor da marca, sem fundo: o `#f0f1f3` fixo do
   `style.css` virava um clarão no tema escuro. */
:where(.pele) .btn--ghost { color: var(--text); background: var(--panel); }
:where(.pele) .btn--ghost:hover:not(:disabled) {
  background: var(--panel); border-color: var(--primary); color: var(--primary);
}

/* A BARRA DE FERRAMENTAS: faixa no tom da marca, botões em cartão. */
:where(.pele) .barra-ferramentas {
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
  border-bottom-color: var(--border);
}
:where(.pele) .barra-ferramentas-btn {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
:where(.pele) .barra-ferramentas-btn:hover {
  background: var(--panel); border-color: var(--primary); color: var(--primary);
}
/* GRAVAR é a ação principal quando aparece — cheio, na cor da marca. */
:where(.pele) .barra-ferramentas-btn[data-barra-acao="gravar"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
:where(.pele) .barra-ferramentas-btn[data-barra-acao="gravar"]:hover {
  background: color-mix(in srgb, var(--primary) 86%, #000); color: #fff;
}
:where(.pele) .barra-ferramentas-btn--perigo:hover {
  border-color: var(--danger); color: var(--danger);
}

/* ------------------------------------------------------------ campos */
/* O ANEL DE FOCO: `--focus-glow` (acima) já pinta o anel das regras de
   foco do `style.css`; aqui ele chega também ao `<select>`, que não tinha
   nenhuma, e a borda do campo acende na cor da marca — trocando a VARIÁVEL
   que o bloco compacto lê, porque a regra dele pesa (0,7,1). */
:where(.pele) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])),
:where(.pele) select,
:where(.pele) textarea {
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
:where(.pele) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])):focus,
:where(.pele) select:focus,
:where(.pele) textarea:focus {
  outline: none; --input-border: var(--primary); border-color: var(--primary);
  box-shadow: var(--anel);
}
/* O CAMPO QUE NÃO SE DIGITA (código, CPF já gravado, descrição de lookup)
   fica no tom do papel: dá para ver de longe o que é de preencher. */
:where(.pele) input[readonly],
:where(.pele) textarea[readonly] { --input-bg: var(--pele-papel); }
/* O REGISTRO TRAVADO (a barra desabilita os `<fieldset>` até o Editar): o
   navegador apagava o texto a 30% e no tema escuro não se lia o cadastro.
   Travado continua LEGÍVEL — o que muda é o fundo, no tom do papel. */
:where(.pele) fieldset:disabled :is(input, select, textarea) {
  --input-bg: var(--pele-papel);
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1;
}
:where(.pele) input[type=checkbox],
:where(.pele) input[type=radio] { accent-color: var(--primary); }

/* O RÓTULO DE CAMPO, como o da caixa de Avatar: curto, em maiúsculas. O
   tamanho (.7rem) é o mesmo do bloco compacto — muda o desenho, não a
   altura da fileira. */
:where(.pele) .form__field > label:not(.checkbox-label),
:where(.pele) .pele-rotulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
:where(.pele) .pele-rotulo { display: block; margin-bottom: var(--label-gap); line-height: 1.3; }
/* O asterisco de obrigatório, na cor de perigo. */
:where(.pele) .obrig { color: var(--danger); font-weight: 700; }

/* O LOOKUP NUM BLOCO SÓ — código, descrição e lupa colados, como o campo
   com o seu Gravar da Administração do Vixchat: são uma coisa, não três
   vizinhos. Os cantos saem da variável `--radius` de cada peça. */
:where(.pele) .lookup-generico-linha { gap: 0; }
:where(.pele) .lookup-generico-linha > .lookup-generico-codigo { --radius: var(--raio) 0 0 var(--raio); }
:where(.pele) .lookup-generico-linha > .lookup-generico-descricao { --radius: 0; margin-left: -1px; }
:where(.pele) .lookup-generico-linha > .lookup-generico-botao {
  --radius: 0 var(--raio) var(--raio) 0; margin-left: -1px;
  border-color: var(--input-border); background: var(--pele-papel); color: var(--text);
}
:where(.pele) .lookup-generico-linha > .lookup-generico-botao:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  border-color: var(--primary);
}
/* A peça com foco (ou sob o mouse) sobe, senão o vizinho colado cobre a
   borda acesa e o anel. */
:where(.pele) .lookup-generico-linha > :is(:focus, :hover) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ seções */
/* CADA QUADRO VIRA UMA FOLHA: cartão com sombra e um cabeçalho de verdade
   em cima, em vez do título encavalado na borda. O `float` tira o
   `<legend>` da borda do `<fieldset>` (é o único jeito: legenda sem float
   o navegador desenha SEMPRE em cima do traço). As margens negativas
   repetem o padding do bloco compacto (6px 10px), para a faixa ir de
   borda a borda. */
:where(.pele) .produtos-secao {
  background: var(--panel); border-color: var(--border);
  border-radius: var(--raio-m); box-shadow: var(--pele-sombra-1);
}
:where(.pele) .produtos-secao > legend {
  float: left; box-sizing: border-box; width: calc(100% + 20px);
  margin: -6px -10px 10px; padding: 7px 12px;
  background: var(--pele-papel); border-bottom: 1px solid var(--border);
  border-radius: var(--raio-m) var(--raio-m) 0 0;
  font-size: .84rem; font-weight: 700; color: var(--text); letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px;
}
/* O traço da marca antes do título. */
:where(.pele) .produtos-secao > legend::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--primary);
  flex: 0 0 auto;
}
:where(.pele) .produtos-secao > legend + * { clear: both; }
/* Uma observação curta no próprio título ("só Pessoa Física"). */
:where(.pele) .pele-legenda-nota {
  font-size: .72rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0;
}

/* ------------------------------------------------------------ controles */
/* O CONTROLE SEGMENTADO (as abas da caixa de Avatar): grupo com fundo, a
   opção marcada em cartão com sombra. São `<input type=radio>` de verdade
   — vão no POST sem JavaScript, e o teclado anda com as setas. A altura é
   a do campo (27px no padrão compacto), para a fileira alinhar. */
:where(.pele) .segmentado {
  display: flex; width: 100%; gap: 2px; padding: 2px; box-sizing: border-box;
  height: 27px; max-width: 100%;
  background: var(--pele-papel-2); border: 1px solid var(--border); border-radius: var(--raio);
}
:where(.pele) .segmentado > label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 0; padding: 0 12px; border-radius: var(--raio-p);
  font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s;
}
:where(.pele) .segmentado > label > input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
:where(.pele) .segmentado > label:hover { color: var(--text); }
:where(.pele) .segmentado > label:has(input:checked) {
  background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
:where(.pele) .segmentado > label:has(input:focus-visible) { box-shadow: var(--anel); }
:where(.pele) .segmentado:has(input:disabled) > label { cursor: default; }
:where(.pele) .segmentado:has(input:disabled) > label:not(:has(input:checked)):hover {
  color: var(--text-muted);
}

/* A CHAVE (liga/desliga): um checkbox comum, vestido. Continua indo no POST
   do mesmo jeito, e com `role="switch"` o leitor de tela anuncia o estado. */
:where(.pele) .chave-pele { gap: 10px; }
:where(.pele) .chave-pele > input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;
  background: color-mix(in srgb, var(--text) 22%, var(--panel)); cursor: pointer;
  transition: background-color .15s, box-shadow .12s;
}
:where(.pele) .chave-pele > input[type=checkbox]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
:where(.pele) .chave-pele > input[type=checkbox]:checked { background: var(--primary); }
:where(.pele) .chave-pele > input[type=checkbox]:checked::before { transform: translateX(14px); }
:where(.pele) .chave-pele > input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--anel); }
:where(.pele) .chave-pele > input[type=checkbox]:disabled { cursor: default; opacity: .7; }
:where(.pele) .chave-pele:has(input:disabled) { cursor: default; }

/* ------------------------------------------------------------ selos */
/* SELO: pílula com um ponto, na cor da situação. */
:where(.pele) .selos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
:where(.pele) .selo {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1;
}
:where(.pele) .selo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
:where(.pele) .selo[hidden] { display: none; }
:where(.pele) .selo--ok { color: var(--pele-ok); background: color-mix(in srgb, var(--pele-ok) 13%, transparent); }
:where(.pele) .selo--acento { color: var(--pele-acento); background: color-mix(in srgb, var(--pele-acento) 13%, transparent); }
:where(.pele) .selo--alerta { color: var(--pele-alerta); background: color-mix(in srgb, var(--pele-alerta) 14%, transparent); }
:where(.pele) .selo--neutro { color: var(--text-muted); background: var(--pele-papel); border-color: var(--border); }
:where(.pele) .selo--neutro::before { display: none; }
/* SELO NA COR DA LINHA: a situação da parcela continua com a cor do VB6
   que a LINHA traz (`gf-linha-*`, testada) — o selo só lhe dá a forma. */
:where(.pele) .selo--linha { color: inherit; background: color-mix(in srgb, currentColor 11%, transparent); }

/* ------------------------------------------------------------ busca */
/* A BARRA DE PESQUISA vira a faixa de filtro da folha: com respiro (antes o
   campo encostava na borda do painel) e o fundo no tom do papel. As alturas
   (36px) continuam as do `style.css`. */
:where(.pele) .panel > .busca-generica {
  margin: 0; padding: 12px 16px; align-items: center;
  background: var(--pele-papel); border-bottom: 1px solid var(--border);
}
:where(.pele) .busca-generica input[type="search"] {
  background: var(--input-bg); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
:where(.pele) .busca-generica__campo:focus { border-color: var(--primary); box-shadow: var(--anel); }

/* ------------------------------------------------------------ grade */
/* A GRADE EM FOLHA: cabeçalho no tom do papel, LINHAS DE ALTURA ÚNICA
   (44px: o selo de 22px com respiro, tenha a linha selo ou não) e um realce
   suave da cor da marca sob o mouse. */
:where(.pele) .grid thead th {
  background: var(--pele-papel); font-size: .7rem; font-weight: 700; letter-spacing: .07em;
}
:where(.pele) .grid tbody td {
  height: 44px; padding-top: 6px; padding-bottom: 6px; vertical-align: middle;
}
:where(.pele) .grid tbody tr:last-child td { border-bottom: 0; }
:where(.pele) .grid tbody tr { transition: background-color .1s; }
:where(.pele) .grid tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
:where(.pele) .grid tbody tr[data-href] { cursor: pointer; }
:where(.pele) .num-tab { font-variant-numeric: tabular-nums; }
:where(.pele) .pele-forte { font-weight: 600; color: var(--text); }
/* O CÓDIGO é identificação, não link azul sublinhado: a linha inteira já
   abre o registro (§2.30). Continua `<a>` para o teclado e o leitor de tela. */
:where(.pele) .pele-cod {
  color: var(--text-muted); font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
:where(.pele) tr:hover .pele-cod, :where(.pele) .pele-cod:focus-visible { color: var(--primary); }
:where(.pele) .pele-vazio { color: var(--text-muted); }

/* ------------------------------------------------------------ rodapé */
/* O RODAPÉ do formulário: o aviso à esquerda, a ação secundária à direita,
   separado do conteúdo por um traço — como o rodapé da caixa de Avatar. */
:where(.pele) .pele-rodape {
  justify-content: space-between; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px;
}
:where(.pele) .pele-dica { font-size: .78rem; color: var(--text-muted); }

/* ------------------------------------------------------------ telefone */
@media (max-width: 639px) {
  /* A grade vira cartões no telefone (`style.css`): cada um ganha canto de
     cartão, sombra e o rótulo no mesmo desenho dos rótulos de campo. */
  :where(.pele) .grid tr {
    border-radius: var(--raio-m); box-shadow: var(--pele-sombra-1); background: var(--panel);
  }
  :where(.pele) .grid tbody td {
    height: auto; min-height: 40px; align-items: center;
    border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
  }
  :where(.pele) .grid tbody td[data-label]:not([data-label=""])::before {
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  }
  :where(.pele) .grid tbody tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  :where(.pele) .grid tbody tr td:last-child { border-bottom: 0; }
  :where(.pele) .panel > .busca-generica { padding: 12px; }
  /* O LOOKUP NUMA FILEIRA SÓ também no telefone. O `style.css` quebra o
     código para uma linha e a descrição com a lupa para outra — com as peças
     COLADAS (acima) isso virava três caixas encavaladas. A 390px cabem as
     três: código 70px, lupa 40px e o resto para a descrição. */
  :where(.pele) .lookup-generico-linha { flex-wrap: nowrap; }
  /* Com a lupa numa fileira só, a largura MÍNIMA dela (~400px) passa a
     valer na coluna `1fr` que a contém e a empurra para fora do painel
     (Produtos, 18/10/2026: 416px em 356). `minmax(0, 1fr)` deixa a coluna
     do tamanho do painel e a descrição da lupa encolhe — que é o que ela
     já faz em qualquer outro lugar. */
  :where(.pele) #produtos-form-principal .produtos-cabecalho { grid-template-columns: minmax(0, 1fr); }
  /* A primeira fileira de Produtos prende rótulos na linha 1 e campos na
     linha 2 (alinhamento do desktop) — no telefone isso cria CINCO colunas
     implícitas ao lado da `1fr`, que a pele (campos um pouco mais largos)
     já não faz caber. Aqui eles voltam ao fluxo: um campo por linha. Só
     em PRODUTOS: Pessoas usa a mesma classe com outra montagem, e ali
     isso separa o rótulo do campo. */
  :where(.pele) #produtos-form-principal .produtos-cabecalho-linha1 > .form__field :is(label, input, select) { grid-row: auto; }
  :where(.pele) .form__field .lookup-generico-linha .lookup-generico-codigo { width: auto; flex-basis: 70px; }
  :where(.pele) .form__field .lookup-generico-linha .lookup-generico-descricao { width: auto; flex: 1 1 0; min-width: 0; }
  :where(.pele) .pele-rodape .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pele) * { transition: none !important; }
}

/* ------------------------------------------------------------ fileiras */
/* O ÚLTIMO CAMPO DO QUADRO DESCIA 2px (medido: "Estado Civil" com a base em
   558,5 e os vizinhos em 556,5). O bloco compacto zera a margem do último
   filho de cada quadro, para a folga de baixo ficar igual em todos — e como
   a fileira alinha os campos pela BASE, o único sem margem fica 2px mais
   baixo. Na fileira de grade a margem é redundante (o espaço entre fileiras
   é o `gap`); sem ela em nenhum, todos alinham. Defeito do `style.css` que
   vale no sistema inteiro — aqui corrigido só onde a pele está ligada. */
:where(.pele) .ncm-linha-4 > .form__field { margin-bottom: 0; }

/* ------------------------------------------------------------ colunas */
/* QUANTAS COLUNAS o campo ocupa na fileira de quatro (`ncm-linha-4`), só
   de tablet para cima: no telefone a fileira tem UMA coluna, e um
   `grid-column: span 2` escrito no `style=` criava uma segunda coluna
   implícita ali. (`--resto` não serve para "o resto ao lado do Código":
   `auto / -1` cai só na última coluna.) */
@media (min-width: 640px) {
  :where(.pele) .pele-col-2 { grid-column: span 2; }
  :where(.pele) .pele-col-3 { grid-column: span 3; }
}

/* ------------------------------------------------------------ vitrine */
/* A VITRINE do registro, no cabeçalho tingido (o topo da caixa de Avatar):
   o broche com as iniciais, o título da tela como rótulo pequeno, o NOME
   grande e o perfil em selos à direita. */
:where(.pele) .pele-heroi { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
:where(.pele) .pele-broche {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 1.2rem; font-weight: 700;
  letter-spacing: .02em; border: 3px solid var(--panel);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
:where(.pele) .pele-heroi-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.pele) .panel__head h1.pele-heroi-titulo {
  margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
:where(.pele) .pele-heroi-nome {
  font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(.pele) .pele-heroi-sub {
  display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: .8rem; color: var(--text-muted);
}
:where(.pele) .pele-heroi-sub b { color: var(--text); font-weight: 600; }
:where(.pele) .pele-heroi-selos { justify-content: flex-end; flex: 0 1 auto; }
:where(.pele) .pele-topo { gap: 12px 20px; flex-wrap: wrap; }

/* OS DADOS PESSOAIS esmaecem quando o tipo é Jurídica: o servidor já os
   ignora nesse caso (grava sexo e estado civil zerados), e a tela passa a
   dizer isso antes de alguém preenchê-los à toa. Esmaecer, não travar: a
   barra de ferramentas é quem trava e destrava os quadros. */
:where(.pele) .pele-secao-pf { transition: opacity .15s; }
:where(.pele) form:has(input[name="tipopessoa"][value="J"]:checked) .pele-secao-pf { opacity: .5; }

@media (max-width: 639px) {
  :where(.pele) .pele-broche { width: 44px; height: 44px; font-size: 1.05rem; }
  :where(.pele) .pele-heroi-nome { font-size: 1.12rem; white-space: normal; }
  :where(.pele) .pele-heroi-selos { justify-content: flex-start; }
}

/* ------------------------------------------------------------ navegação */
/* AS ABAS QUE SÃO LINKS (Financeiro | Cheques | Cartões | Vales na Gestão
   Financeira) levam a OUTRA tela, não abrem um painel: viram o controle
   segmentado. As abas de PAINEL (botões, com lapela emendada no quadro —
   aprovadas pelo usuário em 26/08) continuam lapela: o `:has(> a)` separa
   uma da outra. */
:where(.pele) .produtos-subabas-nav:has(> a.produtos-subaba-btn) {
  /* O seletor carrega a classe dentro do `:has()` para pesar (0,2,1) e
     vencer o `.tela-compacta .produtos-subabas-nav` (0,2,0) da lapela. */
  display: inline-flex; width: fit-content; align-items: stretch; overflow: visible; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
  background: var(--pele-papel-2); border: 1px solid var(--border); border-radius: var(--raio);
}
:where(.pele) .produtos-subabas-nav:has(> a.produtos-subaba-btn) > a.produtos-subaba-btn {
  border: 0; border-radius: var(--raio-p); background: transparent; margin: 0;
  padding: 5px 14px; display: inline-flex; align-items: center;
  color: var(--text-muted); text-decoration: none;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
:where(.pele) .produtos-subabas-nav:has(> a.produtos-subaba-btn) > a.produtos-subaba-btn:hover { color: var(--text); background: transparent; }
:where(.pele) .produtos-subabas-nav:has(> a.produtos-subaba-btn) > a.produtos-subaba-btn.produtos-subaba-btn--ativa {
  background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
:where(.pele) .produtos-subabas-nav:has(> a.produtos-subaba-btn) > a.produtos-subaba-btn:focus-visible { outline: none; box-shadow: var(--anel); }

/* ------------------------------------------------------------ grade: links */
/* O LINK DENTRO DA GRADE (o título, a nota) herda a cor da LINHA — que em
   várias grades é a cor da situação (vencido em vermelho, pago em verde) —
   em vez do azul sublinhado do navegador, que brigava com ela. Sublinha só
   sob o mouse. O `.pele-cod` tem cor própria e fica de fora. */
:where(.pele) .grid tbody td > a:not(.btn):not(.pele-cod) {
  color: inherit; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
:where(.pele) .grid tbody td > a:not(.btn):not(.pele-cod):hover,
:where(.pele) .grid tbody td > a:not(.btn):not(.pele-cod):focus-visible {
  text-decoration: underline; text-underline-offset: 2px;
}

/* AS AÇÕES DA LINHA NUMA LINHA SÓ: um `<form>` em linha seguido de um
   rótulo de marcar (`.checkbox-label` é `flex`, bloco) jogava o rótulo para
   baixo e dobrava a altura de TODAS as linhas da grade (55px medidos na
   Gestão Financeira, onde Baixar, ADB e Lote dividem a célula). */
:where(.pele) .grid tbody td > .checkbox-label {
  display: inline-flex; vertical-align: middle; margin: 0 0 0 8px; white-space: nowrap;
}
:where(.pele) .grid tbody td > form { vertical-align: middle; }

/* ------------------------------------------------------------ gestão financeira */
/* O FILTRO VIRA FOLHA: cartão no tom do papel, com respiro igual nos quatro
   lados e os botões num rodapé separado por um traço — antes os 30 campos
   ficavam soltos no painel, sem dizer onde o filtro acabava e a grade
   começava. As colunas de cada fileira (fiéis ao `.frm`) não mudam. */
:where(.pele) .gf-filtro {
  background: var(--pele-papel); border: 1px solid var(--border);
  border-radius: var(--raio-m); padding: 14px 16px;
}
:where(.pele) .gf-filtro__acoes {
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 2px;
}
/* O VÃO ACIMA DE "TIPO DE PESQUISA": a 2ª fileira alinha pela base, e o
   quadro "Em atraso" (quatro linhas) empurrava os campos comuns para baixo,
   deixando ~50px vazios entre eles e a fileira de cima. Alinhados pelo
   TOPO, os campos encostam na fileira de cima; o quadro alto fica à
   direita, sozinho, que é onde o `.frm` o põe. */
:where(.pele) .gf-filtro__linha--2 { align-items: start; }
:where(.pele) .gf-filtro__atraso {
  border-color: var(--border); border-radius: var(--raio); background: var(--panel);
}
:where(.pele) .gf-filtro__somenteleitura { --input-bg: var(--pele-papel); }

/* ------------------------------------------------------------ barra: vaga fixa */
/* A BARRA NÃO ANDA NO CRUD: Editar troca "Editar + Excluir" por "Gravar +
   Cancelar", e o par novo era 16px mais largo — Pesquisar pulava para a
   direita a cada Editar e voltava a cada Cancelar (medido no molde dos
   cadastros, 17/10/2026). Os quatro botões que se revezam ocupam a MESMA
   vaga: a largura do maior ("Cancelar", 96px), centralizados. */
:where(.pele) .barra-ferramentas-btn:is([data-barra-acao="gravar"], [data-barra-acao="editar"],
                                        [data-barra-acao="cancelar"], [data-barra-acao="excluir"]) {
  min-width: 6.5rem; justify-content: center; text-align: center;
}

/* ------------------------------------------------------------ cadastros (motor genérico) */
/* AS ABAS do motor genérico (`tab` na config) viram o CONTROLE SEGMENTADO:
   a mesma lapela, as mesmas medidas — muda só a cor, o fundo e o canto.
   O `> ` não é enfeite: a regra do bloco compacto pesa (0,2,0), e sem ele
   esta perderia em silêncio. */
:where(.pele) .produtos-abas-nav > .produtos-aba-btn {
  background: var(--pele-papel-2); border-color: var(--border); border-radius: var(--raio-p) var(--raio-p) 0 0;
  transition: background-color .12s, color .12s;
}
:where(.pele) .produtos-abas-nav > .produtos-aba-btn:hover:not(.produtos-aba-btn--ativa) {
  background: color-mix(in srgb, var(--primary) 8%, var(--panel)); color: var(--text);
}
:where(.pele) .produtos-abas-nav > .produtos-aba-btn--ativa {
  background: var(--panel); color: var(--primary); border-bottom-color: var(--panel);
  box-shadow: inset 0 2px 0 var(--primary);
}
/* O CHECKBOX VIRADO CHAVE: dentro do campo flex o `<input>` esticava e comia
   a célula (373px de caixa para 16px de campo); a chave tem tamanho dela.
   O texto fica ao lado, no MEIO da chave (o `.form__field label` do
   `style.css` o punha em bloco, na linha de base, 4px abaixo), e quebra em
   vez de vazar: no telefone "Sempre utilizar este Caixa ao baixar
   Títulos…" saía cortado. */
:where(.pele) .form__field--checkbox > .chave-pele {
  display: flex; width: auto; flex: 0 1 auto; min-width: 0; align-items: center; white-space: normal;
}

/* ------------------------------------------------------------ relatórios */
/* A ÁRVORE DO CATÁLOGO: o relatório escolhido fica no tom da marca, não
   num bloco azul cheio — o cheio gritava mais que o próprio painel de
   parâmetros. O `#f0f1f3` fixo do realce virava clarão no tema escuro. */
:where(.pele) .relatorios-painel-unico .arvore-link { border-radius: var(--raio-p); transition: background-color .1s, color .1s; }
:where(.pele) .relatorios-painel-unico .arvore-link:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
:where(.pele) .relatorios-painel-unico .arvore-link.arvore-link--ativo {
  background: color-mix(in srgb, var(--primary) 14%, var(--panel)); color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}
:where(.pele) .relatorios-painel-unico .relatorio-codigo {
  color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 600;
}
:where(.pele) .relatorios-painel-unico .arvore-link--ativo .relatorio-codigo { color: inherit; }
/* O PAINEL DO RELATÓRIO: o cabeçalho tingido traz o título e, embaixo, o
   código e o arquivo do VB6; os parâmetros num quadro. */
:where(.pele) .relatorios-detalhe-topo h1 { margin: 0; }
/* "Obrigatório ter todas as palavras" é a frase de uma opção, não rótulo
   de campo: o rótulo em maiúsculas da pele a pegava por estar num
   `.form__field`. Volta a ser frase. */
:where(.pele) .form__field > label.busca-caracteristicas-flag { text-transform: none; letter-spacing: normal; }

/* ------------------------------------------------------------ tema escuro */
/* Quatro FUNDOS e TINTAS fixos do `style.css` que viravam clarão ou sumiam
   no tema escuro (Nebula Dark), medidos em 18/10/2026. Mesmo método do
   resto da pele: o fundo vira o "papel" derivado do cartão, e o azul fixo
   se mistura à tinta — escurece no claro, clareia no escuro.
   - `.secao-cartao` (`#fbfcfd`): a caixa de filtros das Notas Fiscais e
     de outras 150 telas ficava um retângulo claro com campos escuros;
   - `.produtos-subaba-btn` (`#f7f8fa`): sub-abas da Cotação, de Pessoas;
   - `.sped-resultados__aba` (`#f0f1f3`, num <style> do próprio template,
     que vem depois deste arquivo — daí `.pele` sem `:where`);
   - link sem classe e `.cor-liberado` (`#0000ee`/`#0000ff`): azul puro
     sobre o cartão escuro não se lia ("(Lançado)" do Cartão, "abrir" do
     histórico do DF-e). */
:where(.pele) .secao-cartao { background: var(--pele-papel); }
:where(.pele) .produtos-subaba-btn:not(.produtos-subaba-btn--ativa) { background: var(--pele-papel); }
.pele .sped-resultados__aba:not(.sped-resultados__aba--ativa) { background: var(--pele-papel); }
:where(.pele) .panel a:not([class]) { color: var(--pele-acento); }
:where(.pele) .cor-liberado, :where(.pele) .cor-liberado td { color: color-mix(in srgb, #0000ff 70%, var(--text)); }
/* A TINTA DO CAMPO fora do `.form__field` (a caixa de filtros das Notas
   Fiscais) era a do NAVEGADOR — preta, ilegível no campo escuro. Com
   especificidade ZERO: só substitui o padrão do navegador e perde para
   qualquer regra do sistema que dê cor a um campo. */
:where(.pele) :where(input, select, textarea):where(:not(:disabled)) { color: var(--text); }

/* ------------------------------------------------------------ título da GF */
/* O FORMULÁRIO DO TÍTULO (Gestão Financeira, 18/10/2026). As ações numa
   fileira que quebra; os quadros de "gerar" com o botão na base da
   fileira de campos; as ações da grade de parcelas em botões pequenos,
   para a linha ter altura única. */
:where(.pele) .gf-titulo-acoes { flex-wrap: wrap; margin: 0 0 var(--campo-gap); }
:where(.pele) .gf-titulo-acoes .grid__inline-form,
:where(.pele) .gf-parcela-acoes .grid__inline-form { display: contents; }
:where(.pele) .gf-titulo-abas { margin-top: 6px; }
:where(.pele) .gf-gerar-linha { align-items: end; }
:where(.pele) .gf-gerar-linha + .gf-gerar-linha { margin-top: 4px; }
:where(.pele) .gf-gerar-botao { display: flex; align-items: flex-end; }
:where(.pele) .gf-nota { margin: 6px 0 2px; font-size: .8rem; color: var(--text-muted); }
:where(.pele) .gf-parcela-acoes { white-space: nowrap; }
:where(.pele) .gf-parcela-acoes .btn--mini { padding-block: 2px; }
:where(.pele) .gf-observacoes { list-style: none; margin: 4px 0 0; padding: 0; }
:where(.pele) .gf-observacoes > li { padding: 6px 2px; border-bottom: 1px solid var(--border); }
:where(.pele) .gf-observacoes > li:last-child { border-bottom: 0; }
/* `fieldset` não encolhe abaixo do conteúdo (`min-width: min-content`): a
   grade de parcelas, larga, empurrava o quadro para fora do painel. Com
   `min-width: 0` a grade rola dentro do seu `.grid-wrap`. */
:where(.pele) .gf-titulo-aba > .produtos-secao { min-width: 0; }
:where(.pele) .gf-titulo-aba tfoot td { font-weight: 700; }
/* A GRADE DE PARCELAS tem dez colunas: com o espaçamento de letras da
   pele e os recuos de célula, passava do painel a 1280px (1296px em 1148) e
   a coluna Ações saía cortada. Aqui o cabeçalho volta ao espaçamento normal
   e as células recuam menos — os rótulos (do VB6) ficam como são. */
:where(.pele) #aba-titulo-parcelas .grid thead th { letter-spacing: .02em; }
:where(.pele) #aba-titulo-parcelas .grid :is(th, td) { padding-left: 6px; padding-right: 6px; }
:where(.pele) .gf-parcela-acoes .btn--mini { padding-inline: 6px; }
/* Ar entre a fileira de ações e o primeiro quadro, e entre o Salvar e as
   abas — no padrão compacto o `--campo-gap` é 2px, e eles encostavam. */
:where(.pele) .gf-titulo-acoes { margin-bottom: 10px; }
:where(.pele) #form-cabecalho .form__actions { margin-bottom: 14px; }