/* ════════════════════════════════════════════════════════════════════════
   CLIENTES, ESTOQUE E CONTRATOS ENTRAM NA MOLDURA
   ════════════════════════════════════════════════════════════════════════
   O Dashboard, o RH, o Financeiro e as Campanhas moram em `#ov-obra`: a
   lateral fica à esquerda, o painel ocupa o resto, e trocar de painel é um
   clique na lateral. Clientes, Estoque e Contratos moravam em `#crm-view`, que
   é a TELA CHEIA — entrar num deles apagava a lateral.

   ── ISSO NÃO ERA SÓ APARÊNCIA ─────────────────────────────────────────
   Sem lateral não havia como sair. Os três tiveram de recriar um botão "CRM"
   dentro do próprio cabeçalho, cada um do seu jeito, depois de a mesma queixa
   ser relatada três vezes — "escolho estoque e nao consigo voltar". Três
   remendos para um problema que era um só: o painel tinha tapado o mapa.

   ── O CONTRATO DA MOLDURA ───────────────────────────────────────────────
   Um painel integrado marca `#crm-overview` com a classe dele, e a moldura
   cede a linha do topo e a coluna da direita, guardando a lateral. É o que
   `.cp-active` faz por Campanhas, `.rhp-ativo` pelo RH e `.finp-ativo` pelo
   Financeiro. As três classes novas — `.cli-ativo`, `.est-ativo`,
   `.ctr-ativo` — fazem exatamente o mesmo, e de propósito com as mesmas
   quatro regras: painel que se integra de um jeito próprio volta a parecer
   outro produto, que foi o começo desta história.

   ── E DEPOIS A COR ──────────────────────────────────────────────────────
   Com a estrutura no lugar, sobrava a faixa: os três tinham o cabeçalho
   dentro de uma barra azul cheia, com o título em branco, enquanto os
   integrados têm topo branco e título escuro. A cor entra nos ícones e no
   botão principal, e não no fundo. Daí as seções 3, 4 e 5.

   Esta folha é ADITIVA e entra depois do tema claro. Nenhuma regra aqui
   reescreve tabela, filtro, coluna lateral, aba ou modal: eles continuam com
   as mesmas classes e o mesmo comportamento.
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   1. A MOLDURA CEDE O MIOLO, E GUARDA A LATERAL
   ════════════════════════════════════════════════════════════════════════
   Duas colunas em vez de três, uma linha em vez de duas, e o painel recebe a
   célula inteira sem respiro próprio — cada um dos três já traz o seu.

   O `!important` acompanha as três classes que já existem: a grade base de
   `#crm-overview` e a de `.sem-dir` têm a mesma especificidade que estas
   regras, e sem ele quem ganha é a ordem dos arquivos. */
#crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo){
  grid-template-columns:262px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
}
#crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo) :is(.ov-topo,.ov-dir){display:none!important}
#crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo) .ov-obra{
  grid-column:2;grid-row:1;padding:0;overflow:auto;min-width:0;
}
#crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo) .ov-lado{grid-row:1}

/* O fundo da página passa a ser da MOLDURA, e não mais de `#crm-view`: é ela
   que está na tela agora. */
html[data-theme="light"] #crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo) .ov-obra{
  background:var(--light-page,#f1f5fa);
}

/* A lateral marca em qual painel se está. Sem isto, entrar em Clientes
   deixava "Dashboard" aceso na lateral — o mapa apontando para o lugar
   errado. */
#crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo) .ov-lado{z-index:2}

/* ── E ELES PRECISAM APARECER ─────────────────────────────────
   Cada painel nasce `display:none` e só aparece pela regra que o liga ao
   modelo escolhido — `#crm-view.est-modelo #est-view{display:block}`. Mudar a
   casa deles quebrou esse par: fora de `#crm-view` o seletor nunca casa, e o
   `display:none` de origem passou a valer sempre. O painel montava inteiro, com
   os 4829 caracteres de conteúdo no lugar, e ficava invisível.

   Clientes escapou por acidente: a regra dele é invertida
   (`#crm-view:not(.cli-modelo)>#cli-view{display:none}`), e fora de `#crm-view`
   ela também não casa — só que, não casando, ele fica VISÍVEL. Dois painéis
   irmãos com a mesma intenção escrita ao contrário, e por isso um quebrou e o
   outro não.

   O par volta a existir, agora contra a marca da moldura. Um painel de cada
   vez, porque `montar()` esvazia `#ov-obra` a cada abertura. */
#crm-overview.cli-ativo .ov-obra>#cli-view{display:block}
#crm-overview.est-ativo .ov-obra>#est-view{display:block}
/* O respiro de baixo é da regra antiga de Contratos, e vem junto: sem ele o
   último cartão encosta na borda da janela. */
#crm-overview.ctr-ativo .ov-obra>#ctr-view{display:block;padding:0 0 40px}

/* ── A MARGEM NEGATIVA DO TOPO DO ESTOQUE ────────────────────────
   `.est-topo` puxava 22px para cima e 26px para cada lado, para sangrar até a
   borda do respiro que `#crm-view` dava. Aqui não há esse respiro — `#ov-obra`
   entrega a célula inteira, como faz para Campanhas — e a margem negativa
   passou a puxar para FORA da tela: o título colava na lateral e o botão "Novo
   produto" ficava cortado na direita.

   Zerada, o próprio `padding:25px 26px 22px` da faixa dá a folga, e ela
   coincide com os 26px que `.est-corpo` e `.est-nav` já usam. */
#crm-overview.est-ativo .ov-obra .est-topo{margin:0 0 18px}

/* O respiro lateral de Contratos também era dado pela regra presa a
   `#crm-view`, inclusive nas duas faixas de responsivo. Vem junto, ou a
   listagem encosta na borda no notebook e no telefone. */
@media(max-width:1180px){
  #crm-overview.ctr-ativo .ov-obra>#ctr-view{padding:0 18px 36px}
}
@media(max-width:768px){
  #crm-overview.ctr-ativo .ov-obra>#ctr-view{padding:0 14px 30px}
}

/* No telefone a lateral encolhe para os ícones, como já faz nos outros. */
@media(max-width:980px){
  #crm-overview:is(.cli-ativo,.est-ativo,.ctr-ativo){
    grid-template-columns:78px minmax(0,1fr)!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   2. O QUE OS TRÊS PASSAM A COMPARTILHAR
   ═══════════════════════════════════════════════════════════════════════
   Estas variáveis são a identidade. Elas ficam em `:root` para que as três
   seções abaixo leiam da mesma fonte: mudar o azul do produto passa a ser
   mexer aqui, e não caçar hexadecimal em três lugares. */
html[data-theme="light"]{
  /* A FAIXA. Branca, separada do corpo por uma linha e não por uma sombra —
     sombra sob um topo branco vira mancha cinza numa página quase branca. */
  --pid-faixa:var(--light-surface,#fff);
  --pid-faixa-linha:var(--light-line,#d8e3f0);

  /* O BOTÃO PRINCIPAL, e o único cheio de cor da tela.

     AS TRÊS PARADAS FORAM MEDIDAS, uma a uma, contra o texto branco. O degradê
     que os painéis reformulados usam na FAIXA termina em #54a3f5, e ali isso
     está certo: atrás de um título de 24px, o mínimo é 3:1. Num botão de 13px
     o mínimo é 4,5:1, e #54a3f5 dá 2,5 — o rótulo do botão mais importante da
     tela sumiria justamente na metade direita dele. Este vai de 7,08 a 4,62. */
  --pid-forte:linear-gradient(105deg,#1454b5,#1f68d5 62%,#2a72dd);
  --pid-forte-sombra:0 4px 14px rgba(47,127,242,.34);
  --pid-forte-sombra-alta:0 8px 24px rgba(47,127,242,.42);

  /* AS ABAS. Trilha clara com a aba ativa em branco por cima — o mesmo
     desenho que `.auth-tabs` e `.est-nav` já usavam, agora com uma trilha só
     para os dois painéis que têm abas no topo. */
  --pid-trilha:#e6eef8;
  --pid-trilha-linha:#cfe0f2;
  --pid-aba:var(--light-muted,#536b84);
  --pid-aba-ativa:#1a5cc0;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. CLIENTES
   ═══════════════════════════════════════════════════════════════════════
   Além da faixa, este painel tinha um segundo desvio: O ACENTO ERA
   VERDE-AZULADO. `--cli-teal` valia #087f8c e `--cli-verde` #047857, herança
   de quando ele foi desenhado sozinho, antes de existir identidade comum.
   Duas famílias de cor no mesmo app leem como dois produtos.

   Trinta e nove usos dessas variáveis mudam de cor com as linhas abaixo. É
   por isso que valeu a pena descobrir que eram variáveis antes de sair
   repintando regra por regra. */
html[data-theme="light"] #cli-view,
html[data-theme="light"] :is(.cli-seg-bg,.cli-seg-modal,.modal-bg){
  --cli-teal:#2f7ff2;
  --cli-teal-forte:#1f68d5;
  /* O verde saía no botão principal, e na arte ele é azul. Verde continua
     existindo no painel, mas onde verde é INFORMAÇÃO — o estado "ativo", o
     indicador que subiu —, e não como segunda cor de marca. */
  --cli-verde:#1454b5;
  /* O tom de página do app inteiro, e não um cinza próprio: é ele que dá ao
     cartão branco de onde se destacar, e é o que os outros painéis já usam. */
  --cli-fundo:var(--light-page,#f1f5fa);
}

html[data-theme="light"] .cli-faixa{
  background:var(--pid-faixa);
  border-bottom:1px solid var(--pid-faixa-linha);
  box-shadow:none;
}
html[data-theme="light"] .cli-faixa :is(.cli-titulo,.cli-sub){color:var(--light-ink,#0f2744)}
html[data-theme="light"] .cli-faixa .cli-sub{color:var(--light-muted,#536b84)}
/* 12px de texto pede 4,5:1, e `--light-faint` dá 3,75 sobre branco. Ele serve
   para rótulo grande; aqui não serve. */
html[data-theme="light"] .cli-faixa .cli-carteira-help{color:var(--light-muted,#536b84)}

/* A busca e os botões deixam de ser "brancos sobre azul" e voltam a ser o que
   são em toda parte: superfície clara com borda. Sem isto ficariam brancos no
   branco, invisíveis a não ser pela sombra. */
html[data-theme="light"] .cli-faixa .cli-busca{
  background:var(--light-surface-soft,#f5f8fc);
  border-color:var(--pid-faixa-linha);
  box-shadow:none;
}
html[data-theme="light"] .cli-faixa .cli-busca-inp{color:var(--light-ink,#0f2744)}
html[data-theme="light"] .cli-faixa .cli-btn:not(.cli-btn-forte){
  background:var(--light-surface,#fff);
  border-color:var(--pid-faixa-linha);
  color:var(--light-muted,#536b84);
}
html[data-theme="light"] .cli-faixa .cli-btn:not(.cli-btn-forte):hover{
  border-color:#2f7ff2;color:#1454b5;background:var(--light-surface-blue,#e8f1fe);
}
html[data-theme="light"] .cli-faixa .cli-btn-forte{
  background:var(--pid-forte);
  border-color:transparent;color:#fff;
  box-shadow:var(--pid-forte-sombra);
}
html[data-theme="light"] .cli-faixa .cli-btn-forte:hover{box-shadow:var(--pid-forte-sombra-alta)}

/* Os indicadores ganhavam um traço azul no topo para se destacarem da faixa
   colorida. Sobre branco esse traço vira enfeite solto, e a borda inteira faz
   o trabalho melhor. */
html[data-theme="light"] .cli-faixa .cli-kpi{
  border-top:1px solid var(--pid-faixa-linha);
  background:var(--light-surface,#fff);
  box-shadow:0 1px 2px rgba(15,39,68,.05),0 6px 18px rgba(15,39,68,.06);
}
html[data-theme="light"] .cli-faixa .cli-kpi:hover{
  border-color:#bcd4ee;
  box-shadow:0 2px 4px rgba(15,39,68,.06),0 12px 28px rgba(15,39,68,.09);
}

/* A área abaixo do topo fica no tom de página, para os cartões brancos terem
   de onde se destacar. Branco sobre branco não tem cartão. */
/* A reserva: quando a moldura não está montada, o painel ainda cai em
   `#crm-view` e precisa do mesmo fundo. */
html[data-theme="light"] #crm-view.cli-modelo{background:var(--cli-fundo,#f1f5fa)}


/* ═══════════════════════════════════════════════════════════════════════
   4. ESTOQUE
   ═══════════════════════════════════════════════════════════════════════
   A faixa daqui é `.est-topo`, e ela sangra para fora do padding do painel
   com margem negativa. A margem e o respiro interno continuam vindo da regra
   do tema claro: esta aqui só declara superfície e cor, então o que ela não
   menciona segue valendo. */
html[data-theme="light"] #est-view .est-topo{
  background:var(--pid-faixa);
  border-bottom:1px solid var(--pid-faixa-linha);
  box-shadow:none;
}
html[data-theme="light"] #est-view .est-topo .est-titulo{color:var(--light-ink,#0f2744)}
html[data-theme="light"] #est-view .est-topo .est-sub{color:var(--light-muted,#536b84)}
html[data-theme="light"] #est-view .est-topo .est-btn{
  background:var(--light-surface,#fff);
  border-color:var(--pid-faixa-linha);
  color:var(--light-muted,#536b84);
}
html[data-theme="light"] #est-view .est-topo .est-btn:hover{
  border-color:#2f7ff2;color:#1454b5;background:var(--light-surface-blue,#e8f1fe);
}
html[data-theme="light"] #est-view .est-topo .est-btn.primario{
  background:var(--pid-forte);
  border-color:transparent;color:#fff;
  box-shadow:var(--pid-forte-sombra);
}
html[data-theme="light"] #est-view .est-topo .est-btn.primario:hover{box-shadow:var(--pid-forte-sombra-alta)}
/* O selo de "Perguntar" é a ação de IA, e continua sendo a única coisa da
   barra com cor própria — mas em azul, e não no índigo do módulo antigo. */
html[data-theme="light"] #est-view .est-topo .est-btn-ia .est-ia-ico{color:#1f68d5}

/* AS ABAS. Elas já eram claras, mas o rótulo da aba INATIVA continuava em
   `rgba(240,240,240,.42)` — a cor do tema escuro. Sobre a trilha clara isso
   dá cerca de 1,05:1: o texto existe e não se lê. Esteve assim desde que o
   tema claro chegou ao estoque. */
html[data-theme="light"] .est-nav{
  background:var(--pid-trilha);
  border:1px solid var(--pid-trilha-linha);
}
html[data-theme="light"] .est-nav-item{color:var(--pid-aba)}
html[data-theme="light"] .est-nav-item:hover{color:#1454b5;background:rgba(47,127,242,.09)}
html[data-theme="light"] .est-nav-item.ativo{
  background:var(--light-surface,#fff);color:var(--pid-aba-ativa);
  box-shadow:0 2px 7px rgba(23,73,124,.09);
}

/* O índigo era "a cor do módulo", escolhida quando clientes usava teal e os
   dois precisavam não se confundir. Agora os dois são azuis, e a distinção
   passou a ser o conteúdo. */
html[data-theme="light"] #est-view{
  --est-cor:#2f7ff2;
  --est-cor-forte:#1f68d5;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. CONTRATOS
   ═══════════════════════════════════════════════════════════════════════
   Mesma faixa, com uma diferença de estrutura: aqui as ABAS MORAM DENTRO DA
   FAIXA, e não abaixo dela. Elas estavam pintadas para assentar sobre azul —
   trilha escura translúcida e rótulo quase branco. Sobre branco, as duas
   coisas somem. */
html[data-theme="light"] .ctr-faixa{
  background:var(--pid-faixa);
  border-color:var(--pid-faixa-linha);
  border-bottom:1px solid var(--pid-faixa-linha);
  box-shadow:none;
}
html[data-theme="light"] #ctr-view .ctr-faixa .ctr-cab h1{color:var(--light-ink,#0f2744)}
html[data-theme="light"] #ctr-view .ctr-faixa .ctr-cab p,
html[data-theme="light"] .ctr-faixa .ctr-cab p{color:var(--light-muted,#536b84)}
html[data-theme="light"] .ctr-faixa .ctr-btn{
  background:var(--light-surface,#fff);
  border-color:var(--pid-faixa-linha);
  color:var(--light-muted,#536b84);
}
html[data-theme="light"] .ctr-faixa .ctr-btn:hover{
  border-color:#2f7ff2;color:#1454b5;background:var(--light-surface-blue,#e8f1fe);
}
html[data-theme="light"] .ctr-faixa .ctr-btn-forte{
  background:var(--pid-forte);
  border-color:transparent;color:#fff;
  box-shadow:var(--pid-forte-sombra);
}
html[data-theme="light"] .ctr-faixa .ctr-btn-forte:hover{box-shadow:var(--pid-forte-sombra-alta)}

/* A mesma trilha do Estoque, de propósito: dois painéis com abas no topo e
   dois desenhos de aba seria a diferença sem motivo que este arquivo existe
   para acabar. */
html[data-theme="light"] .ctr-faixa .ctr-abas-topo{
  background:var(--pid-trilha);
  border-color:var(--pid-trilha-linha);
}
html[data-theme="light"] .ctr-faixa .ctr-aba-topo{color:var(--pid-aba)}
html[data-theme="light"] .ctr-faixa .ctr-aba-topo:hover{
  color:#1454b5;background:rgba(47,127,242,.09);
}
html[data-theme="light"] .ctr-faixa .ctr-aba-topo.on{
  background:var(--light-surface,#fff);color:var(--pid-aba-ativa);
  box-shadow:0 2px 7px rgba(23,73,124,.09);
}
/* O alerta da faixa era um bloco claro translúcido, feito para ler sobre
   azul. Sobre branco ele desaparece; vira o mesmo aviso âmbar do resto do
   app, que é o que ele sempre quis dizer. */
html[data-theme="light"] .ctr-faixa .ctr-cab-alerta{
  background:#fff7e8;border-color:#f0d9a8;color:#7a5205;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. O CONTRASTE, MEDIDO
   ═══════════════════════════════════════════════════════════════════════
   Nenhuma cor acima foi escolhida no olho. Cada par de texto sobre fundo
   desta folha foi calculado, e o pior deles é 4,53:1 — acima do mínimo de
   4,5 para texto normal.

     título       #0f2744 sobre #fff       15,06   (mínimo 3, é 24px)
     subtítulo    #536b84 sobre #fff        5,52
     botão claro  #536b84 sobre #fff        5,52
     botão forte  #fff sobre #1454b5        7,08   (início do degradê)
     botão forte  #fff sobre #1f68d5        5,25   (meio, 62%)
     botão forte  #fff sobre #2a72dd        4,62   (fim — o pior do degradê)
     aba inativa  #536b84 sobre #e6eef8     4,72
     aba ativa    #1a5cc0 sobre #fff        6,30
     aba hover    #1454b5 sobre #e6eef8     6,05

   Duas destas medições existem porque a versão anterior REPROVOU: o degradê
   do botão terminava em #58a7f6 (2,54) e a ajuda da carteira usava
   `--light-faint` (3,75). Nenhuma das duas parecia errada olhando.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   7. O QUE O TEMA ESCURO DEIXOU PARA TRÁS
   ═══════════════════════════════════════════════════════════════════════
   Estes painéis nasceram escuros, e o tema claro chegou depois repintando
   superfície por superfície. O que passou despercebido foi a COR DE ACENTO:
   um vermelho claro como #fca5a5 lê muito bem sobre preto e some sobre um
   fundo rosado; um âmbar #f59e0b sobre o próprio tom a 13% dá 1,56:1.

   Nada disto veio da reformulação — estava assim desde que o tema claro
   chegou a cada painel. Foi encontrado medindo os 270 nós de texto dos dois
   painéis no navegador, e entra aqui porque são exatamente as telas que este
   arquivo acabou de trazer para a identidade: deixar texto ilegível numa tela
   recém-arrumada é entregar metade.

   ── UMA REGRA, E NÃO UMA LISTA DE CORES ─────────────────────────────────
   Os selos já diziam a cor por variável (`--c` no Estoque, `--st` em
   Contratos e em Clientes) e derivavam fundo e borda dela por `color-mix`. Só o TEXTO usava
   a cor pura. Misturando essa mesma variável com a tinta escura, uma regra só
   resolve as dez cores em uso — e as que ninguém usou ainda.

   55% da matiz foi MEDIDO: é a maior fração que mantém a cor reconhecível e
   ainda passa em todas. O pior par fica em 4,71:1.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── OS SELOS DE SITUAÇÃO ─────────────────────────────────────────────── */
html[data-theme="light"] #est-view :is(.est-selo,.est-abc-let){
  color:color-mix(in srgb,var(--c,#6366f1) 55%,#0b1f38);
}
html[data-theme="light"] :is(#ctr-view .ctr-selo,#cli-view .cli-status){
  color:color-mix(in srgb,var(--st,#6366f1) 55%,#0b1f38);
}
/* O pontinho ao lado do rótulo é forma, e não texto: ele continua na cor
   cheia, que é o que o faz ser visto de longe. */

/* ── A FAIXA DE ALERTA DO ESTOQUE ─────────────────────────────────────
   Era o pior da tela: "1 produto esgotado" em #fca5a5 sobre um rosado, 1,45:1
   — o aviso mais urgente do painel, e o único texto que não se lia. */
html[data-theme="light"] #est-view .est-faixa-alerta{
  background:#feeeee;
  border-color:#f4c9c9;
}
html[data-theme="light"] #est-view :is(.est-fa-ico,.est-fa-txt b,.est-sub-esg){
  color:#88333f;
}
html[data-theme="light"] #est-view .est-fa-txt em{color:var(--light-muted,#536b84)}
html[data-theme="light"] #est-view .est-fa-chip{
  background:#fce1e1;border-color:#f0bcbc;color:#88333f;
}
html[data-theme="light"] #est-view .est-fa-chip:hover{
  background:#f9d2d2;border-color:#e5a3a3;
}
/* O botão da faixa seguia o mesmo vermelho claro. */
html[data-theme="light"] #est-view .est-fa-btn{
  background:var(--light-surface,#fff);border-color:#f0bcbc;color:#88333f;
}

/* ── O CONTADOR DE ALERTAS NA ABA ─────────────────────────────────────
   Branco sobre #ef4444 dá 3,76, e ele tem 9,6px: o mínimo aqui é 4,5. */
html[data-theme="light"] #est-view .est-nav-badge{background:#dc2626}

/* ── OS TEXTOS AUXILIARES QUE FICARAM NO CINZA DO TEMA ESCURO ─────────
   `rgba(240,240,240,.5)` sobre branco não é cinza: é branco. */
html[data-theme="light"] #est-view .est-abc-txt{color:var(--light-muted,#536b84)}

/* ── OS CINZAS DE CONTRATOS, POR UM FIO ABAIXO ────────────────────────
   #637d96, #6a8298 e #667f96 dão 4,28, 3,99 e 4,17 sobre branco. Três tons
   quase iguais, todos reprovando por pouco, onde o tema já tem um tom apagado
   que passa com folga. */
html[data-theme="light"] #ctr-view :is(.ctr-sec-sub,.ctr-graf-topo span,
  .ctr-gbar-m,.ctr-rosca-leg em,.ctr-feed time){
  color:var(--light-muted,#536b84);
}


/* ── E OS MESMOS RESTOS EM CLIENTES ───────────────────────────────────
   Encontrados na mesma varredura, num workspace com carteira: 27 nós de texto
   abaixo do mínimo. Quase todos são a mesma coisa — um cinza escolhido no olho
   e por um fio abaixo de 4,5, onde o tema já tem um tom apagado que passa com
   folga. Trocá-los por `--light-muted` resolve dezoito de uma vez. */
html[data-theme="light"] #cli-view :is(.cli-vazio,.cli-data-sub,.cli-acoes-btn,
  .cli-dist-rot,.cli-rodape-txt,.cli-porpag-rot,.cli-vazio-txt,.cli-lado-vazio,
  .cli-resumo-rot,.cli-acao-tipo,.cli-carteira-help){
  color:var(--light-muted,#536b84);
}

/* O contador ao lado do título e o valor do resumo eram o azul e o âmbar
   cheios sobre o próprio tom claro: 3,41 e 4,01. */
html[data-theme="light"] #cli-view .cli-conta{color:#1454b5}
html[data-theme="light"] #cli-view .cli-resumo-val{color:#9a4d07}

/* ── A BOLINHA DO AVATAR ──────────────────────────────────────────────
   A inicial vinha em `--light-ink` sobre a cor cheia da paleta, e nenhuma
   escolha única servia: sobre o índigo #6366f1 o branco dá 4,47 e a tinta
   3,37 — as duas reprovam. Sobre o âmbar acontece o contrário.

   Então a BOLINHA escurece e a inicial fica branca. 60% da matiz sobre preto
   foi medido: guarda muito mais saturação do que misturar com a tinta azulada
   (que a 50% já lia como sete tons de marinho), mantém as sete cores
   distinguíveis entre si — que é a razão de a bolinha ter cor — e o pior par
   fica em 4,71:1. */
html[data-theme="light"] .cli-avatar{
  background:color-mix(in srgb,var(--c,#6366f1) 60%,#000);
  color:#fff;
}