/* ============================================================
   tryzen — o que os dois paineis dividem
   ------------------------------------------------------------
   Graficos (js/paineis/graficos.js), icones das abas, calendario e
   canais. O painel dos socios (/admin) e o dos influenciadores
   (/parceiro) usam os mesmos tokens do app: e o mesmo produto por
   dentro.
   ============================================================ */

/* ---------- as duas cores de serie ----------
   Validadas no dataviz (validate_palette.js), 13/09/2026: separacao pra
   daltonismo, faixa de luminosidade e contraste contra a superficie do
   grafico, no claro e no escuro. Verde e o do app; azul e o par. Nao
   troque sem rodar o validador de novo. */
:root {
  --serie-1: #24913E;
  --serie-2: #007AFF;
  --serie-alerta: #7E5800;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --serie-1: #23A548;
    --serie-2: #2A86F0;
    --serie-alerta: #E8B62C;
  }
}
:root[data-tema="escuro"] {
  --serie-1: #23A548;
  --serie-2: #2A86F0;
  --serie-alerta: #E8B62C;
}

/* ---------- a terceira cor: o que SAI do caixa ----------
   Pedido do dono (14/09/2026): "use o amarelo para mostrar coisas
   negativas, que sao ruins para o caixa da empresa; essa mudanca so
   vale para os graficos". Entao amarelo aqui nao e uma quarta serie
   qualquer: e SEMPRE custo (taxa do Mercado Pago, comissao de
   parceiro). Verde e o que entra, azul e a origem parceiro (que traz
   dinheiro, e por isso nao virou amarela), amarelo e o que sai.

   Validada no dataviz (validate_palette.js), 14/09/2026, contra a
   superficie do cartao de grafico (#F2F2F7 no claro, #221F1B no
   escuro), todos os pares.

   Em 15/09/2026 a superficie escura deixou de ser o marrom e virou o
   cinza do sistema (#221F1B -> #1C1C1E, ver tokens.css). Ela ficou um
   pouco mais ESCURA (luminancia 0,01399 -> 0,01171), entao todo
   contraste subiu em vez de cair: serie-1 5,12 -> 5,30, serie-2
   4,51 -> 4,67, alerta 8,72 -> 9,17. A separacao de matiz nao depende
   do fundo. A validacao continua de pe:
     claro  #7E5800  separacao 8,8 (deutan) do verde, contraste >= 3:1
     escuro #E8B62C  separacao 11,2 (protan) do verde, contraste >= 3:1
   O amarelo do escuro fica acima da faixa de luminosidade de serie
   (0,48-0,67) DE PROPOSITO: dentro dela ele encosta no verde pra quem
   nao separa vermelho de verde (ΔE 3). Ele e cor de ESTADO, nao de
   identidade, e anda sempre com a legenda escrita do lado. */

/* A `.sr-only` mudou pro css/components.css em 22/09/2026: o cartao que
   se puxa leva uma tabela dessas e agora ele abre a Hoje tambem, e o
   APP nao carrega este arquivo. Sem ela definida, a tabela aparecia na
   tela inteira embaixo do grafico. */

/* ============================================================
   O icone de aba e do calendario (js/paineis/graficos.js)
   ------------------------------------------------------------
   So o traco, na cor de quem segura: a aba ativa pinta de verde pelo
   `currentColor`. Era o GlassIcons (duas placas, uma girando) ate
   13/09/2026, quando o dono pediu pra tirar.
   ============================================================ */
.aba-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.aba-ic svg { width: 20px; height: 20px; }

/* ============================================================
   A barra de periodo, com o botao do calendario
   ============================================================ */
.periodo__cal { display: inline-flex; align-items: center; gap: 7px; padding-left: 12px; }
.periodo__cal .aba-ic { width: 18px; height: 18px; }
.periodo__cal .aba-ic svg { width: 17px; height: 17px; }

/* No celular os cinco atalhos dividem UMA fileira por igual e o
   calendario fica com a de baixo inteira. Na quebra livre eram tres
   linhas, e o intervalo escolhido (que e um texto longo) empurrava o
   resto pra uma quarta. Nenhum chip some da tela: continua sem rolar. */
@media (max-width: 899px) {
  .periodo .chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .periodo .chips .chip { min-width: 0; padding: 0 2px; font-size: var(--fs-sm); }
  .periodo .chips .periodo__cal {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 0 14px 0 5px;
  }
}
@media (max-width: 359px) {
  .periodo .chips { gap: 4px; }
  .periodo .chips .chip { font-size: var(--fs-xs); }
}

/* ============================================================
   Graficos
   ============================================================ */
.gx {
  position: relative;
  outline: none;
  border-radius: var(--r-lg);
}
.gx:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); }
.gx__plot { width: 100%; min-height: 210px; }
.gx__svg { display: block; width: 100%; height: auto; overflow: visible; }

.gx__grade { stroke: var(--border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.gx__eixo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  fill: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.gx__linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gx__area { stroke: none; }
.gx__mira { stroke: var(--text-3); stroke-width: 1; opacity: .5; }
.gx__pontos circle { stroke: var(--surface); stroke-width: 2; }

.gx__vazio { fill: var(--border-soft); }
.gx__barra { transition: opacity .15s var(--ease); }
.gx__pico {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-2);
}
/* as barras por hora so ganham destaque quando uma e tocada */
.gx--horas { cursor: pointer; }
.gx--horas.tem-foco .gx__barra:not(.is-foco) { opacity: .4; }
.gx__foco-rotulo { fill: var(--text); font-size: 12px; }

/* as barras sobem da base, uma depois da outra */
.gx__barra.is-sobe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gx-sobe .62s var(--mola, var(--ease)) both;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes gx-sobe {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gx__barra.is-sobe { animation: none; }
}

.gx__legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; }
.gx__chave {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.gx__chave i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

.gx__dica {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: 0 0 0 1px var(--border-soft), 0 10px 30px rgba(0, 0, 0, .14);
  pointer-events: none;
}
.gx__dica-titulo { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 4px; text-transform: lowercase; }
.gx__dica-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.gx__dica-linha + .gx__dica-linha { margin-top: 2px; }
.gx__dica-linha i { width: 12px; height: 3px; border-radius: 2px; align-self: center; }
.gx__dica-linha b { font-weight: 650; font-variant-numeric: tabular-nums; }
.gx__dica-linha span { color: var(--text-3); font-size: var(--fs-xs); }

/* o cartao do grafico */
.gcard {
  margin-top: var(--gap);
  padding: var(--gap) var(--gap) 12px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.gcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap);
  margin-bottom: var(--gap-sm);
}
.gcard__titulo { font-size: var(--fs-lg); font-weight: 600; }
.gcard__sub { margin-top: 2px; }
.gcard__totais { display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-md); }
.gcard__total { text-align: right; }
.gcard__total .stat__value { font-size: var(--fs-h3); }
.gcard__nota { margin-top: 8px; }

@media (min-width: 900px) {
  .gcard { padding: var(--gap-md) var(--gap-md) var(--gap); }
  .gcard__titulo { font-size: var(--fs-h3); }
  .gcard__total .stat__value { font-size: var(--fs-stat); }
  .gcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
  .gcards .gcard { margin-top: 0; }
}

/* ============================================================
   O bento dos paineis (js/paineis/bento.js)
   ------------------------------------------------------------
   O BentoGrid do MagicUI na largura de computador: quatro colunas com
   linha de altura fixa, e cada bloco ocupa 1, 2 ou 4 unidades escritas
   a mao, como no original. No celular sao duas colunas.

   A pergunta de largura e do CONTAINER, nao da janela: com a lateral de
   232px, uma janela de 1000px da so ~700px de conteudo, e quatro
   colunas ali seriam quatro canudos. O container e a caixa `.pbento-c`
   e nao o `.painel__main` de proposito: container de tamanho vira
   caixa de contencao de layout, e o calendario (position: fixed) que
   mora dentro do main passaria a se posicionar dentro dele.

   O bloco veste a mesma superficie do cartao do app (`--surface`, raio
   de cartao, sem sombra): e o mesmo produto por dentro.
   ============================================================ */
.pbento-c { container-type: inline-size; margin-top: var(--gap); }
.pbento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--gap-sm);
}
.pbento__i {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 124px;
  padding: 14px 15px;
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.pbento__i--m,
.pbento__i--g,
.pbento__i--x { grid-column: 1 / -1; }

/* No celular o bloco de meia fileira tem uns 165px: o anel ao lado do
   numero empurrava o "%" pra linha de baixo, e "R$ 3.342,20" em 30px nao
   cabia. O anel repete o numero, entao ele sai; a letra desce um ponto. */
@container (max-width: 719px) {
  .pbento__i--p .pbento__lado { display: none; }
  .pbento__i--p .pbento__valor { font-size: 25px; }
}

@container (min-width: 720px) {
  .pbento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(136px, auto);
    gap: var(--gap);
  }
  .pbento__i { padding: 16px 18px; }
  .pbento__i--m { grid-column: span 2; }
  .pbento__i--g { grid-column: span 2; grid-row: span 2; }
  .pbento__i--x { grid-column: 1 / -1; }
  .pbento__i--g .pbento__valor { font-size: 46px; }
}

/* os estados do app: a mesma legenda de cor em todo lugar */
.pbento__i--certo { background: var(--certo-fundo); }
.pbento__i--acao  { background: var(--acao-fundo); }
.pbento__i--risco { background: var(--risco-fundo); }
.pbento__i--vazio { background: none; box-shadow: inset 0 0 0 1px var(--border-soft); }
.pbento__i--vazio .pbento__valor { color: var(--text-3); font-weight: 500; }

/* a lavagem de 3% do original, e o icone que encolhe um pouco */
.pbento__i::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background .3s var(--ease);
}
.pbento__ic { flex: none; display: flex; color: var(--text-3); transform-origin: left center; transition: transform .3s var(--ease); }
.pbento__ic svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .pbento__i:hover::after { background: color-mix(in srgb, var(--text) 3%, transparent); }
  .pbento__i:hover .pbento__ic { transform: scale(.85); }
}

.pbento__conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pbento__topo { display: flex; align-items: center; gap: 7px; min-height: 22px; }
.pbento__kicker {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-2);
}
.pbento__delta {
  margin-left: auto;
  flex: none;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  white-space: nowrap;
  color: var(--text-2);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.pbento__delta.is-bom  { color: var(--certo-texto); background: var(--certo-fundo); }
.pbento__delta.is-ruim { color: var(--risco-texto); background: var(--risco-fundo); }

/* o numero desce ate encostar no pe: dois blocos vizinhos alinham os
   NUMEROS, que e o que se compara (a mesma regra do bento do app) */
.pbento__meio { margin-top: auto; padding-top: 12px; }
.pbento__meio--lado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pbento__num { min-width: 0; }
.pbento__lado { flex: none; }
.pbento__valor {
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pbento__unidade {
  margin-left: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}
.pbento__nota {
  margin-top: 5px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-2);
}
.pbento__nota b { color: var(--text); font-weight: 600; }
.pbento__corpo { margin-top: 12px; }
.pbento__fundo { position: relative; z-index: 1; margin-top: 12px; }

/* ---------- as colunas que sobem ---------- */
.colunas {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 132px;
}
/* No bloco de meia fileira as colunas sao baixas: a altura dele estica
   os dois vizinhos da mesma fileira, e 132px de coluna deixava os dois
   blocos de numero com um vao do tamanho de um bloco inteiro. */
.pbento__i--m .colunas { height: 84px; }
@container (min-width: 720px) {
  .pbento__i--g .colunas { height: 168px; gap: 7px; }
}
/* a coluna e um BOTAO: e tocando nela que o valor aparece */
.colunas__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.colunas__col:focus-visible { outline: none; }
.colunas__col:focus-visible .colunas__trilho { box-shadow: 0 0 0 2px var(--accent-line); }
.colunas__rotulo {
  height: 13px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-3);
}
.colunas--todos .colunas__rotulo { font-size: 10px; letter-spacing: 0; }
/* A etiqueta do valor: uma so por grafico, por cima de tudo. Ela e mais
   larga que a coluna quando precisa ("R$ 399,20" numa coluna de 30px),
   e o js/paineis/bento.js -> focar() segura ela dentro do grafico. */
.colunas__dica {
  position: absolute;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: var(--tr-mono);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.colunas__trilho {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  overflow: hidden;
}
.colunas__barra {
  display: block;
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--certo-fraco);
  transform-origin: 50% 100%;
}
/* nada aceso ate alguem tocar; tocou, a coluna acende e as outras apagam */
.colunas__barra { transition: opacity .2s var(--ease), background .2s var(--ease); }
.colunas__col.is-foco .colunas__barra { background: var(--accent); }
/* as colunas de CUSTO: o que sai do caixa nao sobe em verde */
.colunas--alerta .colunas__barra { background: color-mix(in srgb, var(--serie-alerta) 55%, transparent); }
.colunas--alerta .colunas__col.is-foco .colunas__barra { background: var(--serie-alerta); }
.colunas.tem-foco .colunas__col:not(.is-foco) .colunas__barra { opacity: .45; }
/* ---------- o mes em curso e a previsao (0070) ----------
   Parcial: a barra de sempre, mais clara, porque o numero ainda anda.
   Previsto: listrada, porque e conta e nao medida. Tocada, acende no
   verde como as outras. Sem contorno: verde com anel em volta e a
   falha que o dono ja apontou (19/09/2026). */
.colunas__col--parcial .colunas__barra { background: color-mix(in srgb, var(--certo-fraco) 55%, transparent); }
.colunas__col--previsto .colunas__barra {
  background: repeating-linear-gradient(135deg, var(--certo-fraco) 0 4px, transparent 4px 8px);
}
.colunas__col--previsto.is-foco .colunas__barra {
  background: repeating-linear-gradient(135deg, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 35%, transparent) 4px 8px);
}

/* mes a mes: a conta que faz a media, uma linha por mes */
.cresc-meses { list-style: none; margin: 0; padding: 0; display: grid; }
.cresc-meses__i {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.cresc-meses__i:last-child { border-bottom: 0; }
.cresc-meses__mes { color: var(--text-2); }
.cresc-meses__valor { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.cresc-meses__taxa {
  min-width: 7ch;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--certo-texto);
}
.cresc-meses__taxa.is-cai { color: var(--serie-alerta); }
.cresc-meses__taxa.is-sem { color: var(--text-3); }
/* o numero previsto quebra entre palavras ("6.839" / "contas"), nunca
   dentro de uma: o redondo() do painel garante que nenhuma e comprida */
.cresc-num .pbento__valor { overflow-wrap: normal; }
/* a previsao divide a fileira com a lista de meses, que e alta: o grafico
   cresce pra ocupar a caixa em vez de deixar um vao em cima do texto */
.pbento__i--m.cresc-previsao .colunas { height: 132px; }
@container (min-width: 720px) {
  .pbento__i--m.cresc-previsao .colunas { height: 190px; }
}
.colunas.is-sobe .colunas__barra {
  animation: colunas-sobe .72s var(--mola, var(--ease)) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes colunas-sobe { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- o anel ---------- */
.anel { display: block; transform: rotate(-90deg); }
.anel__trilho { fill: none; stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 7; }
.anel__cheio { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.anel.is-sobe .anel__cheio { animation: anel-enche 1s var(--ease) .08s both; }
@keyframes anel-enche { from { stroke-dashoffset: var(--volta); } to { stroke-dashoffset: var(--resto); } }

/* ---------- a barra dividida ---------- */
.divisao__barra { display: flex; gap: 3px; height: 12px; }
.divisao__parte { flex-basis: 0; min-width: 0; border-radius: 4px; }
.divisao__parte--0 { background: var(--accent); }
.divisao__parte--1 { background: color-mix(in srgb, var(--text) 18%, transparent); }
.divisao__parte--2 { background: var(--serie-2); }
/* quando a ordem nao conta a historia, a parte escolhe o proprio tom
   (`tom` em js/paineis/bento.js): verde e o que entra, azul e a outra
   metade da mesma coisa, amarelo e o que sai, cinza e o resto */
.divisao__parte--certo  { background: var(--accent); }
.divisao__parte--azul   { background: var(--serie-2); }
.divisao__parte--alerta { background: var(--serie-alerta); }
.divisao__parte--neutro { background: color-mix(in srgb, var(--text) 18%, transparent); }
/* ---------- os quatro pedacos do que sai ----------
   Taxa, comissao, IA e o que foi lancado a mao sao QUATRO coisas e UM
   fato: dinheiro saindo. Por isso nao sao quatro cores, e sim o mesmo
   amarelo em quatro forcas, do maior pro menor. Quatro cores soltas
   fariam a barra parecer quatro assuntos, e o olho procuraria sentido
   na cor em vez de no tamanho. Quem diz qual e qual e a legenda. */
.divisao__parte--sai1 { background: var(--serie-alerta); }
.divisao__parte--sai2 { background: color-mix(in srgb, var(--serie-alerta) 72%, transparent); }
.divisao__parte--sai3 { background: color-mix(in srgb, var(--serie-alerta) 48%, transparent); }
.divisao__parte--sai4 { background: color-mix(in srgb, var(--serie-alerta) 30%, transparent); }
.divisao.is-sobe .divisao__barra { animation: divisao-cresce .85s var(--ease) both; }
@keyframes divisao-cresce { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.divisao__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.divisao__chave i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

/* ---------- a distribuicao (persona) ---------- */
.dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dist__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dist__rotulo { min-width: 0; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.dist__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.dist__num b { color: var(--text); font-weight: 650; }
.dist__trilho {
  display: block;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  overflow: hidden;
}
.dist__barra { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left; }
.dist.is-sobe .dist__barra { animation: canal-cresce .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .dist.is-sobe .dist__barra { animation: none; } }

/* os numeros por genero, lado a lado dentro de um bloco */
.lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lado-a-lado__col { padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--text) 4%, transparent); }
.lado-a-lado__col p + p { margin-top: 3px; }

/* ---------- o ranking ---------- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ranking__linha { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.ranking__pos {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  color: var(--text-2);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.ranking__linha.is-destaque .ranking__pos { color: var(--on-accent); background: var(--accent); }
.ranking__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ranking__nome { font-weight: 600; }
.ranking__texto { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ranking__texto b { color: var(--text); font-weight: 650; }
.ranking__trilho {
  display: block;
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  overflow: hidden;
}
.ranking__barra { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; }
.ranking__linha.is-negativo .ranking__barra { background: var(--risco); }
.ranking.is-sobe .ranking__barra {
  animation: canal-cresce .8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.ranking__sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .pbento__i::after, .pbento__ic { transition: none; }
  .colunas.is-sobe .colunas__barra,
  .anel.is-sobe .anel__cheio,
  .divisao.is-sobe .divisao__barra,
  .ranking.is-sobe .ranking__barra { animation: none; }
}

/* ---------- a cabeca de uma secao com seletor ---------- */
.secao { margin-top: var(--gap-lg); }
.secao__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap);
}
.secao__head .sm { margin-top: 3px; }
.secao__head .chips { flex-wrap: wrap; }

/* os graficos grandes lado a lado no computador, como mais uma fileira
   do mosaico. Classe propria e nao `.gcards`: aquela responde a JANELA
   (o painel do parceiro usa), e esta ao container. */
.gmosaico-c { container-type: inline-size; }
@container (min-width: 720px) {
  .gmosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
  .gmosaico .gcard { margin-top: 0; }
  .gmosaico .gcard--largo { grid-column: 1 / -1; }
}

/* numero que conta: largura da cifra fixa enquanto anda, pra linha nao
   tremer; parado, volta a cifra natural */
.conta { font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .tabela--vendas { --cols: minmax(240px, 2fr) repeat(3, minmax(120px, 1fr)); }
}

/* ============================================================
   Canais
   ============================================================ */
.canais { display: grid; gap: 14px; }
.canal__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--gap); }
.canal__nome { font-weight: 600; }
.canal__numeros b { font-weight: 600; color: var(--text); }
.canal__trilho {
  display: block;
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--border-soft);
  overflow: hidden;
}
.canal__barra {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--serie-1);
  transform-origin: left;
  animation: canal-cresce .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes canal-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .canal__barra { animation: none; } }
.canal__meios { margin-top: 4px; }

/* ============================================================
   O endereco do codigo (painel do influenciador)
   ------------------------------------------------------------
   Desde 20/09/2026 e UM endereco por codigo, e nao seis por canal, entao
   a coluna do nome do canal saiu: sobrou o endereco e o Copiar.
   ============================================================ */
.canais-link { display: grid; gap: 6px; margin-top: 10px; }
.canais-link__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.canais-link__url {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Calendario
   ============================================================ */
.cal { position: fixed; inset: 0; z-index: 80; }
.cal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.cal--largo .cal__scrim { background: transparent; }
.cal.is-aberto .cal__scrim { opacity: 1; }

.cal__caixa {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--gap) var(--gap) calc(var(--gap) + var(--safe-bottom));
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--bg-elev);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .26s var(--mola, var(--ease)), opacity .2s var(--ease);
}
.cal--largo .cal__caixa {
  right: auto; bottom: auto;
  padding: var(--gap-md);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--border-soft), 0 18px 50px rgba(0, 0, 0, .18);
  transform: translateY(-6px);
}
.cal.is-aberto .cal__caixa { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cal__caixa, .cal__scrim { transition: none; }
}

.cal__topo { display: flex; align-items: flex-start; gap: 6px; }
.cal__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--text-2);
}
.cal__nav:hover { background: var(--surface); }
.cal__nav[disabled] { opacity: .3; pointer-events: none; }
.cal__meses { flex: 1; display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
.cal--largo .cal__meses { grid-template-columns: 1fr 1fr; }
.cal--um .cal__meses, .cal--largo.cal--um .cal__meses { grid-template-columns: 1fr; }
.cal--um { z-index: 400; }

.cal__titulo { text-align: center; font-weight: 600; line-height: 36px; text-transform: lowercase; }
.cal__semana,
.cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__semana span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
  padding: 6px 0;
}
.cal__dia {
  position: relative;
  height: 40px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cal__dia span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 2px auto;
  border-radius: var(--r-pill);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.cal__dia:hover span { background: var(--surface); }
.cal__dia[disabled] { color: var(--text-3); opacity: .38; pointer-events: none; }
/* hoje e a LETRA verde e em negrito, sem aro em volta (19/09/2026) */
.cal__dia.is-hoje span { color: var(--accent-texto); font-weight: 700; }
/* a faixa do intervalo, continua entre os dias */
.cal__dia.is-entre::before,
.cal__dia.tem-faixa::before {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  left: 0; right: 0;
  background: var(--accent-tint);
}
.cal__dia.is-inicio.tem-faixa::before { left: 50%; }
.cal__dia.is-fim.tem-faixa::before { right: 50%; }
.cal__dia.is-inicio span,
.cal__dia.is-fim span {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}

.cal__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-top: var(--gap);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--border-soft);
}
.cal__acoes { display: flex; gap: 8px; margin-left: auto; }
.cal__acoes .btn { min-width: 96px; }

/* ============================================================
   As sub-abas (js/paineis/abas.js)
   ------------------------------------------------------------
   Desde 19/09/2026 elas sao chips do app com a gelatina (js/gelatina.js):
   a de agora e VERDE CHEIO, sem aro nenhum. A pilula clara com o aro
   verde, que corria por baixo, saiu: era a falha que o dono apontou no
   painel ("um outline em elementos verdes, em vez de deixar so verde o
   objeto selecionado").

   A fila rola de lado no celular (quatro chips nao cabem com folga), e
   por isso a folga da gelatina e reservada por DENTRO dela: o chip que
   incha nao e cortado pela borda da rolagem.
   ============================================================ */
.subabas {
  display: flex;
  gap: 6px;
  margin-top: var(--gap);
  padding-block: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.subabas::-webkit-scrollbar { display: none; }

/* O nome e a nota miuda ficam na mesma linha de base (um "Tarefas" com
   um "0/6" de mono do lado), e era o `align-items: baseline` que fazia
   isso. So que num flex de uma linha o baseline tambem encosta o
   conjunto no ALTO da caixa: o chip tem 40px de altura e a palavra
   nascia 9px acima do centro, como o dono viu.

   Em grid as duas coisas cabem juntas: o `align-items` continua sendo o
   baseline (nome e nota alinhados entre si) e o `align-content` centra
   a LINHA inteira dentro do chip. E o mesmo conserto do chip com numero
   da fila de galhos (admin/painel.css) e da linha de tarefa. */
.subaba {
  flex: 0 0 auto;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  gap: 0;
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--fs-sm);
}
.subaba:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ---------- Hipóteses Novas (0107): a ficha de cada hipótese ---------- */
.hipn-lista { display: grid; gap: 12px; margin-top: 16px; }
.hipn { padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); }
.hipn__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hipn__estado, .hipn__evidencia { padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--bg); color: var(--text-2); }
.hipn--core .hipn__estado { background: var(--certo-fundo); color: var(--certo-texto); }
.hipn--archived .hipn__estado { color: var(--text-3); }
.hipn__id { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-3); }
.hipn__nome { margin: 10px 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.hipn__expr { margin: 0 0 10px; }
.hipn__expr code { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-2); word-break: break-word; }
.hipn__dados { display: grid; gap: 6px; margin: 0; }
.hipn__dados div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; }
.hipn__dados dt { font-size: var(--fs-xs); color: var(--text-3); }
.hipn__dados dd { margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }
.hipn__dados dd b { color: var(--text); }
.hipn__lista { margin: 10px 0 0; padding-left: 18px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); }
.hipn__rot { margin: 10px 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.hipn__motivo { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.hipn__log { margin: 10px 0 0; font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-3); word-break: break-all; }
@media (max-width: 560px) { .hipn__dados div { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   O seletor que desce (js/paineis/seletor.js, 11/10/2026)
   ------------------------------------------------------------
   O <select> fica atras, valendo; o que se ve e um botao com a mesma
   caixa do campo e um quadro com as opcoes, no desenho que o dono
   mandou na print do Claude: canto redondo, o nome do campo em cima, a
   escolhida num tom acima com o visto. A opcao sob o ponteiro acende
   (pedido do dono, 11/10/2026).
   ============================================================ */
.sel-nativo { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.sel-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--text); }
.sel-botao__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-botao__seta { flex: none; color: var(--text-3); transition: transform .18s var(--ease, ease); }
.sel-botao[aria-expanded="true"] .sel-botao__seta { transform: rotate(180deg); }
.sel-botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sel-botao:disabled { opacity: .5; cursor: default; }

.sel-menu { position: fixed; z-index: 140; box-sizing: border-box; max-width: min(380px, calc(100vw - 16px)); overflow-y: auto; padding: 6px;
  border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, var(--bg)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12);
  animation: sel-desce .14s var(--ease, ease-out); }
@keyframes sel-desce { from { opacity: 0; transform: translateY(-4px); } }
.sel-menu__nome { margin: 0; padding: 8px 12px 6px; font-size: var(--fs-xs); color: var(--text-3); }
.sel-menu__op { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 12px; border: 0;
  border-radius: 10px; background: none; color: inherit; font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.sel-menu__op + .sel-menu__op { margin-top: 2px; }
.sel-menu__txt { display: grid; gap: 2px; min-width: 0; }
.sel-menu__txt b { font-weight: 600; }
.sel-menu__txt span { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.sel-menu__visto { flex: none; display: inline-flex; width: 18px; color: var(--accent-texto, var(--accent)); }
.sel-menu__op[aria-selected="true"], .sel-menu__op:active { background: color-mix(in srgb, var(--text) 9%, transparent); }
.sel-menu__op:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) {
  .sel-menu__op:not(:disabled):hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
  .sel-menu__op[aria-selected="true"]:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
}
.sel-menu__op:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .sel-menu { animation: none; } .sel-botao__seta { transition: none; } }

/* ---------- o X de fechar (12/10/2026) ----------
   Pedido do dono: "todos os fechar deixa em X". O botao que so fecha
   uma caixa vira um circulo com aro e o X dentro, o mesmo dos cartoes
   do Inicio do Coach. O nome continua no aria-label. */
.x-fechar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); color: var(--text-2); cursor: pointer; }
.x-fechar:active { transform: scale(.94); }
.x-fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }