/* ============================================================
   tryzen — painel dos socios
   ------------------------------------------------------------
   Mesmos tokens do app (cor, fonte, raio, respiro): o painel e o
   mesmo produto visto por dentro, nao outro produto. O que muda e a
   LARGURA, e so por isso este arquivo existe.

   O app e mobile-only de proposito (ele e usado correndo). O painel e
   o unico lugar do tryzen que precisa dos dois: o socio olha o numero
   no celular durante o dia e monta link e embaixador sentado, no
   computador. Por isso aqui tem media query, e no resto do produto nao.

     ate 899px   navegacao embaixo (o polegar), tabela vira cartao
     900px+      navegacao na lateral, tabela vira tabela mesmo
   ============================================================ */

.painel-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

/* ---------- entrar / recado ---------- */

.entrada {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.entrada__caixa { width: 100%; max-width: 380px; }

/* ---------- esqueleto ---------- */

.painel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.painel__lado {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--safe-top) + 12px) var(--pad) 10px;
  background: var(--bg);
}

.painel__marca { display: flex; align-items: baseline; gap: 8px; }

/* ---------- o puxador ----------
   So existe no computador: no celular a navegacao e a barra de baixo,
   que nao recolhe. */
.painel__puxar { display: none; }
/* O nome da marca e DESENHO, nao palavra: aqui ele era "tryzen" escrito
   em Figtree 700, o que dava uma logo parecida com a de verdade e
   diferente dela. Entra como mascara do arquivo (assets/marca/nome.svg,
   o mesmo do app) pra pegar a cor do texto nos dois temas. */
.painel__logo {
  display: block;
  width: 74px;                  /* 21 x 3.5584, a razao do desenho */
  height: 21px;
  background: var(--text);
  -webkit-mask: url(../assets/marca/nome.svg) no-repeat center / contain;
  mask: url(../assets/marca/nome.svg) no-repeat center / contain;
}

/* No celular a navegacao desce pro rodape: e onde o polegar chega. */
.painel__nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  padding-bottom: var(--safe-bottom);
  background: var(--tabbar-fundo, var(--bg));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-soft);
}
.painel__aba {
  flex: 1;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  /* acima da pilula, que e desenhada atras */
  position: relative;
  z-index: 1;
  transition: color .2s var(--ease);
}
.painel__aba.is-active { color: var(--accent-texto); }

/* ---------- a pilula que corre ----------
   UM elemento so pra todas as abas: ela e medida em JS (js/paineis/lado.js)
   e levada ate a aba ativa. Um fundo por aba, apagando aqui e acendendo
   ali, nao diz de onde pra onde a pessoa foi.

   No celular ela e o risco fino no alto da aba, como em toda barra de
   baixo; no computador (mais abaixo) ela vira o fundo inteiro. */
.painel__pill {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--accent-texto);
  border-radius: 0 0 3px 3px;
  /* a altura vem do JS, mas no celular quem manda e esta linha */
  max-height: 3px;
  transition:
    transform var(--mola-pilula-dur) var(--mola-pilula),
    width var(--mola-pilula-dur) var(--mola-pilula),
    height var(--mola-pilula-dur) var(--mola-pilula);
}
/* Enquanto a lateral muda de largura, a pilula so acompanha: animar
   por cima de uma animacao faz ela parecer que arrasta pra tras. */
.painel__pill.is-sem-anim { transition: none; }
/* o icone da aba (css/paineis.css): no rodape do celular ele fica em
   cima do nome, e a cor vem do `color` da aba */
.painel__aba .aba-ic svg { width: 22px; height: 22px; }

.painel__pe { margin-left: auto; text-align: right; display: flex; align-items: center; }
/* No celular o e-mail do socio quebrava a linha do topo em duas e
   empurrava a marca pra baixo. Ele nao informa nada aqui: quem esta
   logado sabe quem e. Fica so a saida. */
.painel__pe .xs { display: none; }
.painel__pe .btn { margin-top: 0; }

.painel__main {
  flex: 1;
  /* Item de flex nasce com `min-width: auto`, e isso e o tamanho do
     conteudo mais largo que ele tem dentro: uma fita que corre de lado,
     um codigo comprido, uma URL sem espaco. Sem o zero aqui, o miolo
     empurra a pagina inteira pra direita e a lateral fica pendurada
     fora da tela — foi o que a fita das remessas fez aparecer. */
  min-width: 0;
  padding: 0 var(--pad) calc(88px + var(--safe-bottom));
  max-width: 1180px;
  width: 100%;
}

/* O titulo da aba vem DEPOIS da barra de periodo, e as duas coisas
   estavam quase encostadas: a barra e uma caixa cheia, e "Resumo"
   nascia a 10px dela, como se fosse legenda da barra. O respiro aqui e
   o mesmo que separa duas secoes (--gap-lg), pra ler como comeco de
   assunto. */
.painel__head { padding: var(--gap-lg) 0 var(--gap-md); }
.painel__head .sm { margin-top: 4px; }

.xs-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--fs-xs);
  border-radius: var(--r-pill);
  width: auto;
}

/* ============================================================
   Os botoes do painel sao os botoes do app (17/09/2026)
   ------------------------------------------------------------
   Pedido do dono: "voce esta com uma identidade visual no app e outra
   nos paineis, nao pode ser assim".

   Estava mesmo, e nasceu aqui. Em 16/09 este bloco criou duas classes
   proprias pra dar cor a uma fileira que era toda cinza. Uma delas,
   `btn--verde`, era o `btn--outline` do app pintado de verde: uma
   classe a mais pra dizer o que o app ja dizia com a que tinha. Ela
   saiu, e quem usava virou `btn--outline`.

   O vermelho FICOU, e nao como exceçao: o app ja escreve em vermelho o
   que destroi (veja `.lateral__apagar.is-perguntando`, no apagar
   conversa). `btn--perigo` e essa mesma frase num botao, nao um
   dialeto do painel.

   ---------- e por que nao ha hover nenhum aqui ----------
   Decisao do dono, 17/09. O app nao tem hover em botao NENHUM: ele foi
   feito pro dedo e todo o retorno mora no `:active`, que encolhe 1,5%.
   Um hover que existisse so no painel seria a mesma divergencia de
   novo, com outro nome. Entao o painel nao tem: o aperto e o mesmo, e
   ele funciona igual no dedo e no mouse.

   ---------- todo botao tem caixa (17/09/2026) ----------
   Segundo pedido do dono no mesmo dia: "você não colocou um box/outline
   no que é botão que fica lá embaixo".

   Ele estava certo, e o erro foi meu: eu tinha posto `btn--ghost` nas
   acoes da fileira porque e classe do app. So que no APP o ghost nunca
   aparece assim — em `js/screens/correr.js`, `js/instalar.js` e todos os
   outros ele e botao de largura cheia, sozinho na linha, embaixo de um
   primario. Naquele arranjo ele le como botao pela posicao. Numa fileira
   horizontal de seis, sem caixa, ele le como texto.

   Ou seja: usar a classe certa do app no arranjo errado do app tambem e
   criar identidade nova. Aqui a fileira inteira e `btn--outline`, e o
   unico cheio e a acao que acontece.

   O perigo tem o MESMO aro dos vizinhos e so a letra vermelha. Aro
   proprio ou vermelho cheio fariam dele outra coisa de novo.
   ============================================================ */
.btn--perigo {
  color: var(--risco-texto);
  background: transparent;
  border: 1px solid var(--border);
}

/* ---------- os quadros do resumo ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap-sm);
}
.quadro {
  padding: 14px 15px 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.quadro .stat__value { font-size: 26px; }

/* ---------- grafico ---------- */

.bloco { margin-top: var(--gap-lg); }
.bloco__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
}
.bloco__head .chips { flex-wrap: wrap; }

.gr {
  padding: var(--gap) var(--gap) 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* As barras sao HTML, nao SVG. O SVG esticava com
   `preserveAspectRatio="none"` pra ocupar a largura, e o numero em cima
   da barra sairia esticado junto. Aqui a barra estica e a letra nao. */
.gr__barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 168px;
}
.gr__barras--densa { gap: 1px; }

.gr__col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* o trilho e quem tem a altura de verdade: a barra e uma % DELE, entao
   o numero em cima e o dia embaixo nao roubam altura da leitura */
.gr__trilho {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gr__barra {
  width: 100%;
  max-width: 30px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
}
/* o pico e a unica barra com voz diferente: e o numero que se procura */
.gr__barra--pico { background: var(--accent-texto); }

.gr__valor,
.gr__dia {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  line-height: 1;
  white-space: nowrap;
}
.gr__valor { color: var(--text-2); }
.gr__dia { color: var(--text-3); }
/* `visibility` e nao `display`: o espaco continua reservado, senao as
   barras com numero ficariam mais baixas que as sem */
.gr__valor--mudo { visibility: hidden; }

.gr__pe { display: flex; justify-content: space-between; margin-top: 10px; gap: var(--gap-sm); }

/* ---------- formulario de criar ---------- */

.forma {
  padding: var(--gap);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--gap-lg);
}
.forma__linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm) var(--gap);
}
.forma__linha + .forma__linha { margin-top: var(--gap-sm); }
/* O campo do app e grande porque ele e tocado com o polegar, correndo.
   Aqui sao seis campos numa linha, lidos sentado: a mesma altura faria
   o formulario ocupar a tela inteira. */
.forma .field { padding: 10px 0 8px; }
.forma .field__label { margin-bottom: 5px; }
.forma .field__input { font-size: var(--fs-body); }
.forma select.field__input { cursor: pointer; }
/* O box de descrição (0053): o embaixador escreve uma frase, às vezes
   duas. `resize: vertical` porque arrastar pro lado quebraria a grade
   do formulário, e `display: block` mata o respiro que o textarea ganha
   embaixo por nascer inline. */
.forma textarea.field__input {
  display: block;
  resize: vertical;
  min-height: 46px;
}

/* ---------- tabela ---------- */

.tabela { --cols: 1fr; }

.tabela__cab { display: none; }

/* No celular cada linha e um cartao, e cada numero carrega o proprio
   rotulo (o `data-r` da marcacao). Cabecalho fixo de tabela em tela de
   360px obrigaria a rolar de lado pra saber o que e cada coluna. */
.tabela__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--gap-sm) var(--gap);
  padding: var(--gap);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tabela__linha + .tabela__linha { margin-top: var(--gap-sm); }
.tabela__linha.is-off { opacity: .55; }

.tabela__nome { grid-column: 1 / -1; min-width: 0; }
.tabela__nome p + p { margin-top: 3px; }

.tabela__linha > span {
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tabela__linha > span::before {
  content: attr(data-r);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 400;
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  margin-bottom: 2px;
}

.quebra { overflow-wrap: anywhere; }

/* ============================================================
   Computador
   ============================================================ */

@media (min-width: 900px) {
  .painel {
    flex-direction: row;
    align-items: stretch;
  }

  /* ---------- a lateral que encolhe ----------
     Duas larguras e uma mola: 232px com os nomes, 68px so com os
     icones. O trilho e uma PAREDE (nao ha estado menor que ele), e por
     isso a mola nao passa do ponto. Ver `--mola-trilho` em tokens.css.

     Quem escolhe fica guardado no aparelho (js/paineis/lado.js): o
     painel e ferramenta de trabalho, e quem trabalha encolhido nao quer
     reabrir a lateral toda vez. */
  .painel__lado {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    width: var(--lado-w, 232px);
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap) var(--gap-md) var(--gap-md);
    border-right: 1px solid var(--border-soft);
    overflow: hidden;
    transition: width var(--mola-trilho-dur) var(--mola-trilho);
  }
  .painel__lado[data-lado="trilho"] {
    --lado-w: 68px;
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }

  .painel__marca { align-items: center; gap: 8px; }
  .painel__puxar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    flex: none;
    border-radius: var(--r-sm);
    color: var(--text-3);
    transition: color .2s var(--ease), background .2s var(--ease);
  }
  @media (hover: hover) {
    .painel__puxar:hover { color: var(--text); background: var(--surface); }
  }
  .painel__puxar:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

  /* ---------- o nome de cada aba ----------
     Sai rapido e volta devagar, com espera. Sair rapido tira a palavra
     antes de a borda alcancar ela; voltar atrasado deixa a largura
     chegar primeiro, e so entao o texto aparece. Sao tempos diferentes
     de proposito (os do original). */
  .painel__aba-nome,
  .painel__marca-txt,
  .painel__email,
  .painel__tema-txt {
    transition: opacity .2s .08s var(--ease), transform .2s .08s var(--ease);
  }
  .painel__lado[data-lado="trilho"] .painel__aba-nome,
  .painel__lado[data-lado="trilho"] .painel__marca-txt,
  .painel__lado[data-lado="trilho"] .painel__email,
  .painel__lado[data-lado="trilho"] .painel__tema-txt {
    opacity: 0;
    transform: translateX(-4px);
    transition-delay: 0s;
    transition-duration: .12s;
    pointer-events: none;
  }
  /* A palavra sai da CONTA da largura tambem, senao ela segura a caixa
     aberta enquanto desaparece e o trilho fica com um vao a direita. */
  .painel__lado[data-lado="trilho"] .painel__marca-txt,
  .painel__lado[data-lado="trilho"] .painel__tema-txt,
  .painel__lado[data-lado="trilho"] .painel__email { display: none; }
  /* A marca tambem sai. Ela e um DESENHO de largura fixa (74px, a razao
     do arquivo): espremida em 9px dentro do trilho ela nao vira uma
     marca pequena, vira um borrao. No lugar dela fica o puxador, que e
     o que se procura quando a lateral esta fechada. */
  .painel__lado[data-lado="trilho"] .painel__logo { display: none; }
  .painel__lado[data-lado="trilho"] .painel__marca { justify-content: center; }
  .painel__lado[data-lado="trilho"] .painel__puxar { margin: 0; }
  /* No trilho o icone e a aba inteira: ele fica no meio dela, e nao
     encostado na esquerda como quando havia um nome do lado. */
  .painel__lado[data-lado="trilho"] .painel__aba { justify-content: center; padding: 0; }

  .painel__nav {
    position: static;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
  }
  .painel__aba {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 54px;
    text-align: left;
    padding: 0 10px;
    border-radius: var(--r);
    font-size: var(--fs-body);
    white-space: nowrap;
  }
  .painel__aba .aba-ic svg { width: 20px; height: 20px; }
  /* No computador quem pinta a aba ativa e a pilula, atras. O fundo
     proprio sairia junto com a aba e nao teria como correr. */
  .painel__aba.is-active { background: none; }
  .painel__pill {
    max-height: none;
    border-radius: var(--r);
    background: var(--accent-tint);
  }

  .painel__pe {
    margin: auto 0 0;
    text-align: left;
    display: block;
  }
  .painel__pe .xs { display: block; line-height: 1.2; overflow-wrap: anywhere; }
  .painel__lado[data-lado="trilho"] .painel__pe-acoes { flex-direction: column; }
  .painel__lado[data-lado="trilho"] .painel__pe .btn { width: 100%; padding-inline: 0; justify-content: center; }

  .painel__main { padding: var(--gap-md) var(--gap-lg) var(--gap-2xl); }

  .grade { grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
  .quadro .stat__value { font-size: var(--fs-stat); }

  .gr__barras { height: 210px; gap: 5px; }
  .gr__barras--densa { gap: 2px; }

  .forma__linha { grid-template-columns: repeat(3, 1fr); }
  .forma__larga { grid-column: span 2; }

  /* Aqui a tabela vira tabela: o cabecalho aparece e as colunas
     alinham. O rotulo de cada numero some, porque ele agora esta em
     cima, na coluna. */
  .tabela { --cols: minmax(230px, 2.4fr) repeat(6, minmax(64px, .7fr)) 172px; }
  .tabela--emb { --cols: minmax(230px, 2.4fr) repeat(6, minmax(64px, .7fr)) 118px; }
  /* os pagamentos recebidos, no /parceiro: data e valor */
  .tabela--pago { --cols: minmax(200px, 1fr) 180px; max-width: 520px; }

  .tabela__cab {
    display: grid;
    grid-template-columns: var(--cols);
    gap: var(--gap);
    padding: 0 var(--gap) 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--tr-mono);
    color: var(--text-3);
  }

  .tabela__linha {
    grid-template-columns: var(--cols);
    align-items: center;
    gap: var(--gap);
    padding: 12px var(--gap);
  }
  .tabela__nome { grid-column: auto; }
  .tabela__linha > span { font-size: var(--fs-body); font-weight: 500; }
  .tabela__linha > span::before { content: none; }
}

/* Telas muito largas: a leitura para de crescer junto com a janela.
   Linha de 2000px nao se le, se varre. */
@media (min-width: 1500px) {
  .painel__main { padding-left: var(--gap-2xl); }
}

/* O botao do app ocupa a largura toda porque la ele e o unico caminho
   da tela. Aqui ele fecha um formulario de seis campos: largura de
   botao, nao de faixa. */
.forma .btn { width: auto; min-width: 190px; padding: 0 var(--gap-md); }

/* A URL inteira e util (da pra conferir os UTM sem clicar), mas ela nao
   pode empurrar a linha da tabela pra tres alturas. Duas linhas e o
   teto; o resto sai no botao Copiar. */
.tabela__nome .quebra {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- a barra de periodo ----------
   Uma so pro painel inteiro, acima das quatro abas: e a mesma janela em
   todas elas (ver admin/painel.js). Os atalhos ficam a esquerda porque
   sao o caminho de todo dia; os campos de data vao pra direita, que e
   onde se procura o caso raro.

   Enquanto o banco conta, a barra apaga e para de aceitar toque: sem
   isso da pra empilhar cinco periodos em cinco cliques e ver o numero
   de um deles chegar depois do outro. */
.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm) var(--gap);
  margin-top: var(--gap-sm);
  padding: 12px var(--gap) 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.periodo.is-carregando { opacity: .55; pointer-events: none; }
/* os atalhos QUEBRAM de linha em vez de rolar de lado: sao cinco, e um
   chip escondido fora da tela e um chip que nao existe */
.periodo .chips { flex-wrap: wrap; }

.periodo__datas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  width: 100%;
}
.periodo__datas--fechado { display: none; }
.periodo__campo { display: flex; align-items: center; gap: 7px; }
.periodo__rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
}
/* o reset do app manda `input { width: 100% }`, que aqui esticaria cada
   campo de data pra largura da barra */
.periodo__campo input {
  width: auto;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
}
.periodo__campo input:focus-within,
.periodo__campo input:focus { border-color: var(--accent-texto); }
/* o iconezinho nativo vem azul no Chrome; aqui ele e cinza como o resto */
.periodo__campo input::-webkit-calendar-picker-indicator {
  filter: grayscale(1);
  opacity: .55;
  cursor: pointer;
}
.periodo__campo input::-webkit-calendar-picker-indicator:hover { opacity: .9; }

.periodo__conta { width: 100%; margin-top: 2px; }
.periodo__erro  { width: 100%; }

@media (min-width: 900px) {
  .periodo { padding: 12px var(--gap); }
  /* aqui sobra largura: os campos ficam sempre a vista e o chip que os
     abria no celular perde a funcao */
  .periodo__datas,
  .periodo__datas--fechado { display: flex; width: auto; margin-left: auto; }
  .periodo__mais { display: none; }
  /* a linha de datas e a de atalhos cabem lado a lado: a conta do
     periodo desce sozinha, embaixo dos dois */
  .periodo__conta { width: 100%; }
}

/* ---------- o botao de tema ----------
   Mora ao lado do "Sair", que e onde o resto do produto guarda o que e
   de configuracao. No celular a palavra some e fica so o icone: a
   linha do topo tem a marca e mais nada de espaco. */
.painel__pe-acoes { display: flex; align-items: center; gap: 6px; }
.painel__tema { display: inline-flex; align-items: center; gap: 6px; }
.painel__tema svg { flex: none; }
.painel__tema-txt { display: none; }

@media (min-width: 900px) {
  .painel__pe-acoes { margin-top: 6px; }
  .painel__tema-txt { display: inline; }
}

/* ============================================================
   Divulgação: uma LISTA, e o que tem dentro de uma linha
   ------------------------------------------------------------
   Pedido do dono (16/09/2026): "em vez de já aparecer mil informações e
   todas as box abertas visualmente, faça que seja uma lista, seguindo a
   lógica de pastilhas".

   ---------- por que a linha é um BOTÃO e não um cartão clicável ----------
   O cartão inteiro clicável deixaria o quadradinho de marcar, os chips
   de contato e os seis botões do pé dentro da área de clique: apertar
   "Desativar" abriria o cartão junto. A linha é uma peça só — seta,
   nome, nota e dinheiro — e o quadradinho fica FORA dela, encostado.

   ---------- a seta gira, ela não troca ----------
   Um `>` que vira `v` pisca de um desenho pro outro e não diz que os
   dois são a mesma coisa em dois estados. Girar 90° diz: a mesma seta,
   apontando pra onde o conteúdo está.
   ============================================================ */

/* A lista: os itens encostados, com o respiro mínimo que separa um do
   outro. Sem isso cada linha ficaria a um `--gap` da outra, e a lista
   voltaria a ter a altura das box que ela substituiu. */
.lista-emb { margin-top: var(--gap); }
/* Na lista o respiro e das PECAS de dentro (a linha, o miolo): o
   cartao em si vira so o fundo que segura as duas. Fora dela `.emb`
   continua sendo o cartao de sempre — e o que o /parceiro usa. */
.lista-emb > .emb { margin-top: 6px; padding: 0; }
.lista-emb > .emb:first-child { margin-top: 0; }

.emb {
  display: block;
  margin-top: var(--gap);
  padding: var(--gap);
  border-radius: var(--r-card);
  background: var(--surface);
}
/* Fechada, a linha traz o proprio respiro; aberta, o miolo traz o dele,
   com um fio dizendo onde a linha acaba e o conteudo dela comeca. */
.emb__dentro {
  padding: var(--gap);
  border-top: 1px solid var(--border-soft);
}
.emb.is-off { opacity: .55; }

/* ---------- a linha ---------- */
.linha-emb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 12px;
}
.linha-emb__marca { flex: none; }

.linha-emb__abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 13px 12px;
  border: 0;
  border-radius: var(--r-card);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.linha-emb__abrir:hover { background: var(--surface-2); }
.linha-emb__abrir:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }

.linha-emb__seta {
  flex: none;
  display: flex;
  color: var(--text-3);
  transition: transform .22s var(--mola-pulo, var(--ease)), color .16s var(--ease);
}
.linha-emb__seta svg { width: 18px; height: 18px; }
/* A seta so GIRA ao abrir. Ela tambem ficava verde (`color: var(--accent)`),
   e o dono pediu cinza em 17/09/2026: o verde e a cor da acao que acontece
   (o botao cheio), e gasta-lo num indicador de aberto/fechado tira dele o
   significado. O giro de 90 graus ja diz tudo o que a cor dizia. */
.emb.is-aberta .linha-emb__seta { transform: rotate(90deg); }

.linha-emb__nome {
  font-size: var(--fs-body);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.linha-emb__nums {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* O dinheiro é a última coisa da linha e encosta na direita: é a única
   com prazo, e é o que a pessoa veio conferir de relance. */
.linha-emb__dinheiro {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.3;
  min-width: 0;
}
.linha-emb__valor { font-size: var(--fs-body); font-weight: 600; }
.linha-emb__dinheiro.is-acao  .linha-emb__valor { color: var(--acao-texto); }
.linha-emb__dinheiro.is-risco .linha-emb__valor { color: var(--risco-texto); }

/* No estreito o dinheiro desce pra própria fileira em vez de espremer o
   nome: nome cortado não serve pra escolher ninguém. */
@media (max-width: 560px) {
  .linha-emb__dinheiro {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
    flex-basis: 100%;
    padding-left: 24px;
  }
  .linha-emb__nums { flex-basis: 100%; padding-left: 24px; }
}
/* os links sem dono nao sao um embaixador: o traco no lugar do corpo
   cheio e a mesma lei do `.card--vazio` do app */
.emb--soltos {
  background: none;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

/* Marcado no quadradinho: o cartao fica VERDE, e so. Era um aro verde
   de 2px por dentro, e o dono apontou exatamente isso (19/09/2026): "um
   outline em elementos verdes, em vez de deixar so verde o objeto
   selecionado". */
.emb.is-marcado { background: var(--certo-fundo); }

.emb__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-sm);
}
/* O nome empurra a nota pra direita enquanto couber, e no estreito a
   nota desce inteira em vez de espremer o nome em duas letras. */
.emb__quem { flex: 1 1 200px; min-width: 0; }
.emb__quem p { margin-top: 3px; }
/* As acoes do cartao nascem no PE dele, separadas por um fio: elas
   valem pra tudo que esta acima, e no topo competiam com o nome. */
.emb__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--border-soft);
}
.emb--soltos .emb__acoes { margin-top: 0; padding-top: 0; border-top: 0; }

/* a nota de qualidade, na testa do cartao */
.emb__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
}

/* ---------- o quadradinho, desenhado a mao ----------
   O `base.css` zera o `appearance` de todo input do app, e um checkbox
   sem `appearance` some: ele fica la, clicavel e invisivel. Em vez de
   abrir excecao no reset (que valeria pro app inteiro), o desenho vem
   daqui — e de quebra ele passa a ter a cor e o raio do produto. */
.marca { display: flex; align-items: center; }
.marca input {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--border);
  cursor: pointer;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.marca input:checked {
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7'/></svg>") center / 14px no-repeat;
  box-shadow: none;
}
.marca input:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ============================================================
   A barra do que esta marcado
   ------------------------------------------------------------
   So existe com alguem marcado: uma barra permanente e vazia e o
   lembrete de uma tarefa que ninguem pediu.
   ============================================================ */
.selbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-top: var(--gap);
  padding: 12px var(--gap);
  border-radius: var(--r-card);
  /* verde de fundo, sem aro: e a barra do que esta escolhido */
  background: var(--certo-fundo);
}
.selbar__quem { min-width: 0; flex: 1 1 200px; }
.selbar__quem p + p { margin-top: 2px; }
.selbar__acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   A fita das remessas (migration 0048)
   ------------------------------------------------------------
   Pedido do dono (15/09/2026): "nao coloque o calendario, faca que vai
   correndo". Um calendario abre um mes inteiro pra responder o que cabe
   em duas caixas — o que fechou e o que esta enchendo. As remessas sao
   uma FILA que anda, entao elas deitam e correm de lado, com encaixe.

   A caixa tem largura fixa de proposito: e ela que faz a fila parecer
   fila. Larguras que se ajustam ao conteudo dariam uma regua irregular,
   e a semana de R$ 1.240,00 pareceria maior que a de R$ 49,90 antes de
   alguem ler o numero.
   ============================================================ */
.remessas {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--border-soft);
}
.remessas__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--gap-sm);
}

.fita {
  display: flex;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
  padding-bottom: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* a fita sangra ate a beirada do cartao: uma caixa cortada pela metade
     na borda direita e o que diz "tem mais pra la" sem escrever isso */
  scroll-padding-left: 0;
}
.fita__i {
  flex: 0 0 188px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px transparent;
}
/* Uma caixa por MES: cabe a soma, as duas datas e a frase do prazo sem
   apertar o numero. */
.fita--mes .fita__i { flex-basis: 214px; }

/* A cor diz o ESTADO do dinheiro, e so ela: amarelo e o que espera pra
   sair, verde e o que ja saiu, vermelho e o que passou do dia
   combinado. O que esta correndo nao ganha tinta, so um fio: ele ainda
   nao e uma divida. */
.fita__i--a_pagar  { background: var(--acao-fundo); }
.fita__i--atrasada { background: var(--risco-fundo); box-shadow: inset 0 0 0 1px var(--risco-fio); }
.fita__i--paga     { background: var(--certo-fundo); }
/* a que esta correndo leva um fio CINZA: ela nao e escolha nem dinheiro
   que saiu, e verde em volta dela diria as duas coisas */
.fita__i--aberta   { box-shadow: inset 0 0 0 1px var(--border); }
.fita__i--futura,
.fita__i--vazia    { opacity: .62; }
/* Fechou com dinheiro dentro mas nao e a vez dela: ocupa a altura do
   botao que nao tem, pra fila continuar sendo uma regua. */
.fita__espera { margin-top: auto; padding-top: 6px; }
.fita__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
}
/* "3ª remessa" nao parte no meio: quebrado em duas linhas ele deixa de
   ser um numero de fila e vira duas palavras soltas. */
.fita__n { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.fita__valor {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Duas linhas reservadas: sem isso, a caixa com frase curta fica mais
   baixa que a vizinha e a fila deixa de ser uma regua. */
.fita__frase { min-height: 2.6em; }
.fita__btn { width: 100%; margin-top: auto; }

/* o botao de escolher o dia nao e um campo: ele fica no fim da linha */
.forma__botao { display: flex; align-items: flex-end; padding-bottom: 8px; }
.forma__botao .btn { width: 100%; min-width: 0; }

.num__valor {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.emb__links { margin-top: 8px; }
/* o bento do embaixador mora dentro do cartao dele: o bloco precisa se
   separar do fundo do cartao, que e da mesma cor */
.emb .pbento__i { background: var(--bg); }
.emb .pbento__i--certo { background: var(--certo-fundo); }
.emb .pbento__i--acao  { background: var(--acao-fundo); }
.emb .pbento__i--risco { background: var(--risco-fundo); }
.emb__rotulo { margin-top: var(--gap); }
.emb__links > .sm { padding: 4px 0; }

/* ---------- um link ---------- */

.link {
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--bg);
}
.link + .link { margin-top: var(--gap-sm); }
.link.is-off { opacity: .6; }
.link__quem p + p { margin-top: 3px; }

.link__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--gap-sm);
  margin-top: 10px;
}
.link__numeros .num__valor { font-size: var(--fs-lg); }

.link__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.forma--dentro { margin: var(--gap) 0 0; background: var(--bg); }

/* ---------- o dia em que cada um recebe (0050) ----------
   Fica sempre na tela, dentro do cartao da pessoa, e nao escondido
   atras de um botao: trocar o dia foi o pedido, e o que se faz de novo
   nao pode custar dois cliques toda vez.

   O `select` do dia e mais estreito que os outros campos porque o que
   cabe nele e "dia 31": um campo de 1fr ao lado de uma data faria a
   linha parecer dois campos do mesmo tamanho pra dados de tamanhos
   muito diferentes. */
.dia-pg__dia { max-width: 190px; }

/* ---------- o calendario de pagamento (0050) ----------
   Uma linha por pessoa: o dia, quem, o estado e quanto. Ordenada por
   DATA, porque a pergunta aqui e "o que sai primeiro".

   No celular a linha vira bloco de duas colunas; no computador as
   quatro alinham, e a coluna do dia e a primeira porque e por ela que
   o olho procura. */
.agenda { margin-top: var(--gap-lg); }
.agenda__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--gap-sm);
  margin-bottom: var(--gap-sm);
}
.agenda__linha {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px var(--gap-sm);
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.agenda__linha + .agenda__linha { margin-top: 6px; }
/* a mesma lei da fita: a cor e o estado do dinheiro, nunca enfeite */
.agenda__linha--a_pagar  { background: var(--acao-fundo); }
.agenda__linha--atrasada { background: var(--risco-fundo); }
.agenda__dia {
  display: flex;
  flex-direction: column;
  min-width: 74px;
  line-height: 1.2;
}
.agenda__quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.agenda__quem b { overflow-wrap: anywhere; }
.agenda__valor { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- o livro de gastos (0049) ---------- */
.forma--gasto { background: var(--surface); }
.forma__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

/* A caixa de marcar e o rotulo dela sao um alvo so: em tela de trabalho
   ninguem mira num quadrado de 16px. */
.marca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.marca input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); }

.gastos { margin-top: var(--gap); }
.gastos__linha {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px var(--gap-sm);
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.gastos__linha + .gastos__linha { margin-top: 6px; }
.gastos__cat { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
/* Todo SVG precisa de tamanho: sem width/height ele estica ate o
   tamanho do container e engole a linha inteira. */
.gastos__ic { display: inline-flex; }
.gastos__ic svg { width: 18px; height: 18px; }
.gastos__quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gastos__valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.gastos__acoes { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.gastos__vezes { grid-column: 1 / -1; }

/* ---------- quem acessou ----------
   Uma linha por acesso. No celular vira bloco (a data em cima, o resto
   embaixo); no computador as cinco colunas alinham. */

.acessos {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--border-soft);
}
.acessos__linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.acessos__linha:last-of-type { border-bottom: 0; }
.acessos__quem b { font-weight: 600; }

@media (min-width: 900px) {
  .emb { padding: var(--gap-md); }

  /* ---------- no computador as linhas viram linhas ----------
     No celular cada uma e um bloco de duas colunas, porque quatro
     colunas em 360px espremeriam o nome ate ele quebrar letra a letra.
     Aqui elas alinham, e ai a lista vira uma regua de comparar. */
  .agenda__linha {
    grid-template-columns: 96px minmax(0, 1fr) auto 118px;
  }
  .gastos__linha {
    grid-template-columns: 132px minmax(0, 1fr) 128px 112px auto;
  }
  .gastos__vezes, .gastos__acoes { grid-column: auto; }
  .gastos__acoes { justify-content: flex-end; flex-wrap: nowrap; }
  .gastos__valor, .agenda__valor { text-align: right; }

  /* ---------- o dia do pagamento nao e um formulario largo ----------
     Sao duas escolhas curtas (o dia, de 1 a 31, e a data de comeco) e um
     botao. Nas tres colunas de 1fr do `.forma__linha` o botao ficava com
     a largura de um campo de data inteiro, e "Salvar o dia" virava um
     banner verde no meio do cartao. Aqui cada peca ocupa o que precisa e
     a linha comeca na esquerda. */
  .dia-pg .forma__linha { grid-template-columns: auto auto auto; justify-content: start; }
  .dia-pg .forma__botao .btn { width: auto; }
  /* Flex e nao grade de tres colunas fixas: a media query pergunta a
     JANELA, e a janela tem 232px de lateral dentro dela. Numa tela de
     1000px o miolo tem 714, e tres colunas rigidas (240 + 300 + os
     botoes) empurravam as acoes pra fora do cartao. Aqui as tres partes
     tem largura minima e quebram de linha quando nao cabem. */
  .link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
  }
  .link__quem { flex: 1 1 200px; min-width: 0; }
  .link__numeros { flex: 2 1 280px; }
  .link__acoes { flex: 0 0 auto; margin-left: auto; }
  .link__numeros,
  .link__acoes { margin-top: 0; }
  .link__acoes { justify-content: flex-end; }

  .acessos__linha {
    grid-template-columns: 118px minmax(220px, 1.6fr) 130px 110px minmax(110px, 1fr);
    align-items: baseline;
    gap: var(--gap);
  }
}

/* ---------- Vendas > Origem (0087) ----------
   A mesma linha da lista de comissoes: empilhada no celular, seis
   colunas no computador. */
.origem { margin-top: var(--gap-sm); }
.origem__linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.origem__linha:last-of-type { border-bottom: 0; }
.origem__linha.is-off { opacity: .6; }
.origem__linha b { font-weight: 600; }
.origem__linha > span { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .origem__linha {
    grid-template-columns: 110px minmax(130px, 1fr) 100px minmax(170px, 1.3fr) minmax(150px, 1fr) minmax(180px, 1.3fr);
    align-items: baseline;
    gap: var(--gap);
  }
}

/* ---------- o historico de pagamentos ---------- */
@media (min-width: 900px) {
  .repasse__linha { grid-template-columns: 118px minmax(220px, 1.6fr) minmax(140px, 1fr) auto; }
}
/* O botao desabilitado fica visivelmente parado enquanto a RPC corre:
   sem isto, um clique duplo manda dois pedidos e a pessoa ganha o dobro
   dos dias. */
.emb__acoes .btn[disabled] { opacity: .45; pointer-events: none; }

/* ============================================================
   Menos movimento
   ------------------------------------------------------------
   Quem pede menos movimento no sistema nao ve a lateral encolher nem a
   pilula correr: as duas trocam de estado na hora. O painel continua
   inteiro, e o estado final e exatamente o mesmo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .painel__lado,
  .painel__pill,
  .painel__aba,
  .painel__aba-nome,
  .painel__marca-txt,
  .painel__email,
  .painel__tema-txt,
  .painel__puxar { transition: none; }
}

/* ============================================================
   O selo de qualidade e os CODIGOS
   ------------------------------------------------------------
   A qualidade era uma sub-aba com um cartao por pessoa, duas barras e
   quatro numeros — a mesma pessoa que o cartao dela ja descrevia dois
   dedos abaixo. Sobrou o que era leitura: a categoria e a diferenca
   contra a media dos outros, na testa do cartao.
   ============================================================ */

.qual__dif {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-2);
}

.selo {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
}
.selo--certo { background: var(--certo-fundo); color: var(--certo-texto); }
.selo--acao  { background: var(--acao-fundo);  color: var(--acao-texto); }
/* O `--risco` existe em css/components.css e vinha DEPOIS dele o `.selo`
   daqui, que tem a mesma especificidade e reescrevia fundo e cor: a
   pilula "atrasada" saia cinza em cima do cartao vermelho. As tres
   variantes do painel moram juntas por isso — a que fica sozinha em
   outro arquivo e a que perde pra ordem de carga. */
.selo--risco { background: var(--risco-fundo); color: var(--risco-texto); }

/* ---------- os codigos ---------- */

.cods__grade { display: grid; gap: var(--gap-sm); margin-top: var(--gap-sm); }

.cod {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--surface);
  /* A cor do quadro e a memoria de "esse eu ja mandei". Ela entra por
     TRANSICAO e nao de uma vez: o quadro que acabou de ser copiado
     acende na frente de quem copiou, e e assim que a marca vira
     confirmacao em vez de enfeite. */
  transition: background .3s var(--ease);
}
/* Copiado e escolhido sao VERDE de fundo, sem aro (19/09/2026). Os dois
   podem valer juntos: o escolhido pra copiar em lote fica um tom acima. */
.cod.is-copiado { background: var(--certo-fundo); }
.cod.is-escolhido { background: var(--accent-tint); }
.cod.is-copiado.is-escolhido { background: var(--certo-fraco); }

/* ============================================================
   O cartao que a busca acendeu (16/09/2026)
   ------------------------------------------------------------
   Pedido do dono: apertar "Ver na Divulgacao" tem que mostrar
   EXATAMENTE aquela pessoa, e no estilo do quadro de codigo.

   Entao e o mesmo gesto do `.cod.is-copiado` aqui em cima: a cor ENTRA,
   o cartao ACENDE na frente de quem esta olhando, e apaga sozinho. O
   contrario — escurecer o resto da tela com um veu — foi tentado no
   outro produto e sobre fundo claro lia como sujeira; e ele diz o que
   NAO e, em vez de dizer o que e.

   A sombra e TINGIDA com a propria cor, nunca cinza: sombra colorida
   parece luz, sombra cinza parece sujeira.

   `scroll-margin-top` existe porque a rolagem para com o cartao colado
   no topo da janela, e cartao colado na borda nao parece o comeco de
   nada. Ele e maior no celular, onde o topo ainda tem a marca em cima.
   ============================================================ */
.is-focado { scroll-margin-top: 84px; }

@media (min-width: 900px) {
  .is-focado { scroll-margin-top: 20px; }
}

/* ---------- aceso e a base; a animacao so APAGA ----------
   O aceso mora na classe, em CSS comum, e a animacao existe so pra
   levar ele de volta ao normal. Ao contrario, o cartao nao apareceria
   destacado em maquina com animacao desligada no sistema: `both` para
   no estado final, e o estado final e o apagado. Foi exatamente o que
   aconteceu nesta bancada.

   ---------- o cartao grande nao se PINTA de verde ----------
   No quadro de codigo (`.cod`) o fundo verde e o destaque, e funciona
   porque nao ha nada colorido dentro dele. No cartao de um embaixador
   ha: a remessa atrasada e vermelha, a que espera e amarela, e essas
   cores sao SEMI-TRANSPARENTES. Pintar o cartao de verde por tras
   misturava vermelho com verde e a remessa atrasada aparecia marrom —
   o destaque apagava o aviso que o dono mais precisa enxergar.

   Entao o que acende aqui e o ARO e a SOMBRA, e o cartao sobe 2px. E o
   mesmo gesto do dia apertado na agenda do outro produto: a peca
   levanta e ganha sombra tingida com a propria cor. Sombra colorida
   parece luz; sombra cinza pareceria sujeira. */
/* Sem o aro verde desde 19/09/2026 (a regra do dono pro verde): o que
   acende e a SOMBRA tingida e o cartao que sobe, e as duas coisas apagam
   sozinhas. */
.emb.is-focado,
.cod.is-focado {
  box-shadow: 0 14px 34px -12px var(--certo-fraco);
  transform: translateY(-2px);
  animation: apagou 4.2s var(--ease) both;
}

@keyframes apagou {
  0%, 70% {
    box-shadow: 0 14px 34px -12px var(--certo-fraco);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: translateY(0);
  }
}

/* Quem pediu menos movimento nao perde a marca: ela so nao anima, e
   fica ate o proximo repinte. Sem isto o `both` da animacao deixaria o
   cartao sem destaque nenhum, e o botao pareceria nao ter feito nada. */
@media (prefers-reduced-motion: reduce) {
  .emb.is-focado,
  .cod.is-focado { animation: none; }
}
/* o desenho do quadradinho e o `.marca` la de cima: o mesmo gesto */
.cod__quem { min-width: 0; }
/* Era o nome do canal; desde 20/09/2026 e o CODIGO, que e o nome do
   endereco agora que ha um so por codigo. */
.cod__canal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.cod__canal svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.cod__quem p + p { margin-top: 2px; }
.cod__marcado { color: var(--certo-texto); }

.secao__acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- a etiqueta de embaixador, na aba Pessoas ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  background: var(--surface-2);
  color: var(--text-2);
}
.etiqueta--emb { background: var(--certo-fundo); color: var(--certo-texto); }
.etiqueta svg { width: 14px; height: 14px; }

/* ============================================================
   As pecas de contato (16/09/2026)
   ------------------------------------------------------------
   O Instagram, o telefone e o e-mail eram uma linha de texto separada
   por `·`: dava pra ler e nao dava pra usar. Agora cada um e uma peca
   clicavel com o simbolo da coisa, e o simbolo e o que se acha de
   relance numa tela com dez cartoes.

   Elas NAO ganham cor de marca. Seis logos coloridas lado a lado viram
   um cartaz de patrocinio dentro de um painel de trabalho; o que separa
   uma da outra e o DESENHO do icone, nao a tinta.
   ============================================================ */
/* Escopo desde 19/09/2026: estas regras sao das PASTILHAS de contato
   (o @, o telefone, o e-mail), que sao links e etiquetas. Os chips de
   ESCOLHA do painel (periodo, janelas, sub-abas, galhos) sao botoes com
   o desenho do app, e esta regra solta em `.chip` pintava eles de cinza
   miudo por cima da gelatina. */
.chips--contato {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
}
a.chip,
span.chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  /* palavra sem espaco vinda do usuario (e-mail, @) precisa poder
     quebrar: `1fr` nao protege, `min-width:0` mais a quebra protegem */
  overflow-wrap: anywhere;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .18s var(--ease), filter .18s var(--ease);
}
/* ---------- a cor no lugar do simbolo (16/09/2026) ----------
   Os desenhos das redes sairam a pedido do dono. Quem separa uma
   pastilha da outra agora e a COR, e cada uma significa uma coisa:
   verde e o @ (por onde a divulgacao acontece), azul e o telefone (por
   onde se FALA com a pessoa) e cinza e o e-mail (o caminho mais lento).
   Verde no telefone leria como "deu certo", e telefone nao e acerto. */
/* So a cor, sem aro (19/09/2026): o aro em volta do verde era a falha. */
.chip--insta {
  background: var(--certo-fundo);
  color: var(--certo-texto);
}
.chip--zap {
  background: var(--azul-fundo);
  color: var(--azul-texto);
}
/* o que falta nao some: em quem divulga, @ faltando e trabalho a fazer */
.chip--falta { opacity: .6; }
/* o aro aparece no hover do cinza e fecha no dos coloridos: a pastilha
   responde ao mouse sem trocar de cor, que e o que ela significa */
/* sem hover (a regra de uma identidade so): o toque responde no aperto */
a.chip:active { scale: .97; }

/* ============================================================
   A barra de busca da Divulgação (16/09/2026)
   ------------------------------------------------------------
   Pedido do dono: "a parte de buscar não é uma aba extra, é uma função
   que deve na parte da divulgação. Mas faça menor o tamanho pra
   conseguir se enquadrar melhor".

   A aba antiga tinha um campo de `--fs-lg` com sublinhado, que é o
   campo de FORMULÁRIO do produto: ele pede uma resposta e espera. Este
   não pede nada — ele é um controle da lista que está embaixo dele, e
   por isso tem a altura de um botão pequeno (36px, a mesma dos
   `.xs-btn` da linha de cima) e a forma de pílula, como eles.

   `max-width` porque uma barra de busca de 1100px numa lista de três
   nomes promete um índice que não existe.
   ============================================================ */
.busca-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  min-height: 38px;
  margin-top: var(--gap-sm);
  padding: 0 6px 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  transition: box-shadow .16s var(--ease);
}
/* ---------- sem aro neon (16/09/2026) ----------
   Pedido do dono: "remova essa outline neon, não faz sentido ela".

   Eram DOIS anéis ao mesmo tempo, e o gritante não era o meu: o
   `:focus-visible` do base.css desenha `outline: 2px solid var(--accent)`
   em tudo o que recebe foco, e no escuro o `--accent` é verde puro. Num
   campo que a pessoa vai usar o tempo todo, isso é um letreiro.

   Aqui o foco não precisa gritar: o cursor já está piscando dentro do
   campo e a pílula já tem um aro. Então ele só FECHA o aro que já
   existe — de `--border-soft` pra `--border` —, que é o mesmo gesto do
   `.field:focus-within` do produto. */
.busca-mini .busca-mini__campo:focus-visible { outline: none; }
.busca-mini:focus-within { box-shadow: inset 0 0 0 1px var(--border); }
.busca-mini__ic { flex: none; display: flex; color: var(--text-3); }
.busca-mini__ic svg { width: 17px; height: 17px; }
.busca-mini__campo {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  /* o reset de base.css já tira borda e fundo; aqui só a altura da
     caixa, pra letra não encostar no aro da pílula */
  padding: 8px 0;
}
/* O X só nasce com palavra dentro: um botão de limpar num campo vazio
   é um botão que não faz nada. */
.busca-mini__x {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.busca-mini__x svg { width: 15px; height: 15px; }
.busca-mini__x:hover { background: var(--surface-2); color: var(--text); }

/* ============================================================
   A busca e o filtro, na mesma linha (22/09/2026)
   ------------------------------------------------------------
   Os dois são controles da MESMA lista, e são irmãos: um acha uma
   pessoa, o outro corta a lista em duas. Em linhas separadas o filtro
   parecia um título de seção nova, e empurrava a lista pra baixo de uma
   tela que já tem cabeçalho, ações e busca.

   `space-between` e não `gap` só: com espaço sobrando os chips vão pro
   fim da linha, onde já moram os botões de ação da seção acima. Sem
   espaço, eles descem inteiros, e a busca fica com a largura dela.
   ============================================================ */
.emb-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}
/* 320px é o que o placeholder inteiro ocupa ("Digite nome, e-mail,
   número, @ ou código"). Abaixo disso os chips descem pra própria linha
   em vez de espremer o campo: nada aqui sai cortado. */
.emb-filtros .busca-mini { flex: 1 1 320px; }
/* `1 1 auto` e não `0 0 auto`: sem poder encolher, a fila mantém a
   largura do texto inteiro e o último chip sai pela direita da tela no
   celular. Encolhendo, os três chips quebram em duas linhas, que é o que
   o `flex-wrap` de `.chips` já sabe fazer. */
.emb-filtros .chips { flex: 1 1 auto; min-width: 0; margin-top: var(--gap-sm); }
/* o chip com número: nome e número na MESMA linha de base, e a linha no
   MEIO do chip. É a mesma regra dos galhos no celular — em flex o
   baseline gruda o texto no alto do chip. */
.emb-filtros .chip {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  min-height: 38px;
  font-size: var(--fs-sm);
}

/* ---------- a ficha que a busca de Pessoas devolve ----------
   Quem é embaixador não está na lista de contas desde 22/09/2026, e
   procurar por ele ali tem que levar pra Divulgação em vez de responder
   "nenhuma conta". Esta linha é uma PORTA, não um cartão: ela não abre
   nada, só diz onde a pessoa está e leva até lá. Por isso o desenho é
   mais leve que o de `.emb` — traço pontilhado, sem fundo cheio. */
.pes-fichas { display: grid; gap: 8px; margin-top: var(--gap-sm); }
.pes-ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px dashed var(--border);
  background: var(--surface);
}
.pes-ficha__nome { flex: 1 1 auto; min-width: 0; }

/* A avaliação desceu pro Resumo do cartão quando a aba Tarefas saiu: ela
   fica entre o bento e a lista de códigos, com o mesmo respiro que o
   rótulo "N códigos" tem embaixo dela. */
.emb__avaliacao { margin-top: var(--gap-md); }

@media (min-width: 900px) {
  .cods__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   19/09/2026: o painel no nivel do celular
   ------------------------------------------------------------
   Pedido do dono: "falta padronizar [o computador] no mesmo nivel que
   hoje e o mobile (excelente, 10/10)". Nas perguntas de opcao ele
   escolheu "leitura + grade" e "cada galho e uma tela":

     · a lateral aberta vira a ARVORE (o BranchedMenu, js/paineis/galhos.js),
       e o trilho recolhido continua sendo os icones das abas;
     · em cima do conteudo, a FAIXA com o nome da aba e o periodo, presa
       no topo enquanto a tela rola;
     · o conteudo tem largura maxima e fica no meio;
     · as listas (embaixadores, contas, pagamentos) viram duas colunas,
       e o cartao aberto ocupa a linha inteira.
   No celular nada disso muda de lugar: os galhos viram a fileira de
   chips no topo da aba, e a barra de baixo continua sendo as abas.
   ============================================================ */

/* ---------- a faixa de cima ---------- */
.painel__topo { padding-top: calc(var(--gap-sm) + 2px); }
.painel__topo-dentro { display: flex; flex-direction: column; gap: var(--gap-sm); }
.painel__titulo {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.painel__topo .periodo { margin-top: 0; }
.periodo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.periodo__atalhos { flex-wrap: nowrap; }

/* ---------- os galhos no celular ---------- */
.painel__galhos-cel { margin-top: var(--gap-sm); }
.painel__galhos-fila {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 7px;
  scrollbar-width: none;
}
.painel__galhos-fila::-webkit-scrollbar { display: none; }
.painel__galhos-fila > .chip { flex: 0 0 auto; min-height: 40px; font-size: var(--fs-sm); }

/* ---------- a barra de baixo do celular: seis abas ---------- */
.painel__aba[data-pendente]::after {
  content: '';
  position: absolute;
  top: 9px;
  left: calc(50% + 9px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acao-texto);
  border: 2px solid var(--bg);
}
@media (max-width: 899px) {
  .painel__aba { min-width: 0; font-size: 12px; }
  .painel__aba-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   A arvore (js/paineis/galhos.js)
   ------------------------------------------------------------
   Os numeros do BranchedMenu: trilho de 2px com o degrade que some
   embaixo, marcador de 16px que corre ate a secao, galhos de 1,5px com
   curva de raio 10, o galho ativo redesenhado em 400ms e a dobra de
   300ms. As cores sao as do app: o fio e o cinza de borda, o destaque e
   o verde de letra.
   ============================================================ */
.galhos { display: none; }
.galhos {
  --g-tinta: var(--text);
  --g-destaque: var(--accent-texto);
  --g-fio: var(--border);
  --g-apagado: var(--text-3);
  --g-sai: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 8px 14px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  scrollbar-width: thin;
}
.galhos::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--g-fio) 0%, var(--g-fio) 55%, transparent 100%);
}
.galhos__marcador {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--g-destaque);
  opacity: 0;
  transition: top 220ms var(--g-sai), opacity 150ms ease;
}
.galhos__marcador[data-on] { opacity: 1; }

.galhos__secao { display: flex; flex-direction: column; }
.galhos__cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 4px 9px 0;
  color: var(--g-apagado);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.galhos__secao[data-aberta] > .galhos__cabeca,
.galhos__secao[data-ativa] > .galhos__cabeca { color: var(--g-tinta); }
.galhos__cabeca[data-ativo] { color: var(--g-destaque); font-weight: 600; }
.galhos__cabeca:active,
.galhos__item:active { opacity: .7; }
.galhos__cabeca:focus-visible,
.galhos__item:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; border-radius: 8px; }

.galhos__ic { display: inline-flex; flex: none; }
.galhos__ic svg { width: 19px; height: 19px; }
.galhos__ic--item svg { width: 16px; height: 16px; }
.galhos__nome,
.galhos__rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* o que falta fazer ali: amarelo, a cor de "pede olhar" do app */
.galhos__conta {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--acao-fundo);
  color: var(--acao-texto);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
}
.galhos__secao[data-aberta] > .galhos__cabeca .galhos__conta { display: none; }

.galhos__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--g-sai);
}
.galhos__secao[data-aberta] .galhos__corpo { grid-template-rows: 1fr; }
.galhos__dobra { min-height: 0; overflow: hidden; }
.galhos__arvore { position: relative; box-sizing: border-box; padding: 6px 0; }
.galhos__linhas {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.galhos__secao[data-aberta] .galhos__linhas { opacity: 1; transition: opacity 250ms ease 100ms; }
.galhos__base,
.galhos__alcance {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.galhos__base { stroke: var(--g-fio); }
.galhos__alcance { stroke: var(--g-destaque); transition: stroke-dashoffset 400ms var(--g-sai); }

.galhos__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--g-linha);
  padding: 0 4px 0 var(--g-recuo);
  color: var(--g-apagado);
  font-size: var(--fs-sm);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.galhos__item[data-ativo] { color: var(--g-destaque); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .galhos__marcador { transition: opacity 150ms ease; }
  .galhos__corpo, .galhos__alcance { transition: none; }
}

/* ============================================================
   O quadradinho com mola (js/paineis/marcar.js)
   ------------------------------------------------------------
   O SpringCheck no tamanho do painel: caixa de 22px, letra de 15px. A
   caixa solta e o aro cinza; feita, e o verde cheio com o visto na
   letra do botao principal, e o aro fica escondido embaixo do cheio.
   ============================================================ */
/* O quadradinho fica na linha de CIMA do texto (um item de duas linhas
   nao pode ter a caixinha boiando no meio delas), e por isso era
   `align-items: flex-start`. So que a linha do checklist e uma celula de
   grade: quando o item vizinho tem duas linhas, esta fica com a altura
   dele e o conteudo ia todo pro alto da caixa.

   Grid separa as duas: `align-items: start` mantem a caixinha colada na
   primeira linha, e `align-content: center` poe o conjunto no meio da
   altura sobrando. O mesmo conserto do .subaba. */
.marcar {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: center;
  justify-content: start;
  gap: 11px;
  min-height: 36px;
  padding: 7px 0;
  max-width: 100%;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.marcar:disabled { cursor: default; }
.marcar__aperto {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border-radius: 7px;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.marcar[data-apertado] .marcar__aperto { transform: scale(.95); }
.marcar:focus-visible .marcar__aperto { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.marcar__caixa {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  transform-origin: center;
}
.marcar__aro {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.marcar__cheio {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: center;
}
.marcar__visto {
  position: relative;
  width: 68%;
  height: 68%;
  overflow: visible;
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marcar__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marcar__rotulo { position: relative; display: inline-block; align-self: flex-start; max-width: 100%; }
.marcar__palavra { display: inline-block; overflow-wrap: anywhere; }
.marcar__risco {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left center;
  pointer-events: none;
}
.marcar__nota {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  font-weight: 400;
  color: var(--text-3);
}
@media (prefers-reduced-motion: reduce) {
  .marcar__aperto { transition: none; }
}

/* ---------- o checklist ---------- */
.checklist { margin-top: var(--gap-sm); }
.checklist__conta { margin-bottom: 4px; }
.checklist__itens { display: grid; gap: 0 20px; }
.checklist__itens--linha { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.checklist__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  min-width: 0;
}
.checklist__extra { flex: none; padding-top: 7px; }
.checklist__apagar { flex: none; margin-top: 3px; }
.checklist__reuniao {
  margin-top: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--border-soft);
}
.reuniao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-sm);
  margin: 4px 0 4px 33px;
}
.reuniao .field { flex: 0 1 180px; margin: 0; }
.linha-emb__falta { color: var(--acao-texto); }
.repasse__linha > .checklist__itens--linha { grid-column: 1 / -1; }

/* ---------- os pagamentos feitos (Divulgacao > Pagamentos) ---------- */
.pagamentos { display: grid; gap: 8px; margin-top: var(--gap); }
.pagamento { padding: 12px var(--gap) 8px; border-radius: var(--r-card); background: var(--surface); }
.pagamento__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pagamento__topo > b:first-child { flex: 1 1 auto; min-width: 0; }

/* ---------- as tarefas dos socios (Resumo > Tarefas) ---------- */
.tarefa-nova {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-sm);
  margin-top: var(--gap);
}
.tarefa-nova .field { margin: 0; }
.tarefa-nova__texto { flex: 1 1 260px; }
.tarefa-nova .field:not(.tarefa-nova__texto) { flex: 0 1 190px; }
.tarefa-nova .btn { margin: 0; }
.pendencias { display: grid; gap: 6px; margin-top: 8px; }
.pendencias__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  min-height: 48px;
  padding: 0 var(--gap);
  border-radius: var(--r-card);
  background: var(--acao-fundo);
  color: var(--acao-texto);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  transition: scale .16s var(--ease);
}
.pendencias__linha:active { scale: .99; }
.pendencias__ir { display: inline-flex; }
.pendencias__ir svg { width: 16px; height: 16px; }

/* ============================================================
   O Suporte (0069)
   ============================================================ */
.suporte-painel { margin-top: var(--gap); }
.suporte-painel__lista { display: grid; gap: 6px; }
.conversa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 12px 44px 12px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.conversa:active { scale: .99; }
.conversa.is-aberta { background: var(--certo-fundo); }
.conversa__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conversa__nome { font-size: var(--fs-sm); }
.conversa__quando { color: var(--text-3); white-space: nowrap; }
.conversa.is-esperando .conversa__quando { color: var(--acao-texto); }
.conversa__ultima {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.conversa__conta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
}
.suporte-painel__vazio { display: none; }
.suporte-painel__conversa {
  margin-top: var(--gap);
  padding: var(--gap);
  border-radius: var(--r-card);
  background: var(--surface);
}
.suporte-painel__cabeca { display: flex; align-items: center; gap: var(--gap-sm); }
.suporte-painel__falas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  margin: var(--gap) 0;
  padding-right: 4px;
}
.fala { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.fala--pessoa { align-self: flex-start; }
.fala--equipe { align-self: flex-end; align-items: flex-end; }
.fala__texto {
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--bg);
  font-size: var(--fs-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fala--pessoa .fala__texto { border-bottom-left-radius: var(--r-sm); }
.fala--equipe .fala__texto { background: var(--accent-tint); border-bottom-right-radius: var(--r-sm); }
.fala__quem { color: var(--text-3); }
.suporte-painel__resposta { display: grid; gap: var(--gap-sm); }
.suporte-painel__resposta .field { margin: 0; }
.suporte-painel__resposta .btn { justify-self: start; margin: 0; }
.suporte-da-conta {
  align-self: center;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.suporte-da-conta.is-esperando { background: var(--acao-fundo); color: var(--acao-texto); }

@media (max-width: 899px) {
  /* no celular a conversa aberta toma o lugar da lista */
  .suporte-painel.tem-aberta .suporte-painel__lista { display: none; }
  .suporte-painel.tem-aberta .suporte-painel__conversa { margin-top: 0; }
}

/* ============================================================
   Computador
   ============================================================ */
@media (min-width: 900px) {
  /* a lateral aberta mostra a arvore; o trilho, os icones das abas */
  .painel__lado:has(.galhos)[data-lado="aberto"] .painel__nav { display: none; }
  .painel__lado[data-lado="aberto"] .galhos { display: flex; }
  .painel__lado[data-lado="trilho"] .galhos { display: none; }

  /* no trilho a aba de agora e o verde CHEIO, como toda escolha */
  .painel__pill { background: var(--accent); }
  .painel__aba.is-active { color: var(--on-accent); }

  .painel__main { max-width: none; padding: 0 var(--gap-lg) var(--gap-2xl); }

  .painel__topo {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 calc(-1 * var(--gap-lg));
    padding: 14px var(--gap-lg);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid var(--border-soft);
  }
  .painel__topo-dentro {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap);
    max-width: 1180px;
    margin: 0 auto;
  }
  .painel__titulo { font-size: var(--fs-h2); }
  .painel__topo .periodo {
    flex-wrap: nowrap;
    gap: var(--gap-sm);
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .painel__topo .periodo__conta { order: -1; white-space: nowrap; }
  .painel__topo .chip--pill { min-height: 38px; padding: 0 14px; font-size: var(--fs-sm); }

  .painel__folha { max-width: 1180px; margin: 0 auto; }
  .painel__folha .secao__head .h3 { font-size: 24px; }
  .painel__folha > .secao__head--so { margin-top: var(--gap-lg); }

  /* as listas em duas colunas; a aberta ocupa a linha inteira */
  .lista-emb {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }
  .lista-emb > .emb,
  .lista-emb > .emb:first-child { margin-top: 0; }
  .lista-emb > .emb.is-aberta,
  .lista-emb > .emb--soltos { grid-column: 1 / -1; }

  .pagamentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emb .checklist__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* o Suporte: a lista a esquerda, a conversa a direita */
  .suporte-painel {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }
  .suporte-painel__vazio {
    display: grid;
    place-items: center;
    min-height: 240px;
    border-radius: var(--r-card);
    border: 1px dashed var(--border);
  }
  .suporte-painel__conversa { margin-top: 0; position: sticky; top: 96px; }
  .suporte-painel__voltar { display: none; }
}

/* ---------- acertos do primeiro olhar na bancada (19/09/2026) ----------
   · a fileira de galhos e so do celular: no computador eles moram na arvore;
   · os atalhos do periodo ficam numa linha so (a regra antiga `.periodo .chips`
     mandava quebrar, e ela ganhava por especificidade);
   · com a arvore, a lateral aberta ganha 32px: o nome inteiro do galho vale
     mais que o respiro do conteudo, e "Embaixad..." nao se le. */
@media (min-width: 900px) {
  .painel__galhos-cel { display: none; }
  .periodo .periodo__atalhos { flex-wrap: nowrap; }
  .painel__lado:has(.galhos) { --lado-w: 264px; }
  .painel__lado:has(.galhos)[data-lado="trilho"] { --lado-w: 68px; }
}
@media (min-width: 900px) {
  /* a descricao do periodo tem o tamanho dela, e os chips uma linha so */
  .painel__topo .periodo__conta { flex: 0 0 auto; width: auto; margin: 0; }
  .painel__topo .periodo__linha { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* os campos pequenos do painel (reuniao, tarefa): letra de formulario,
   e nao a letra de numero grande dos campos do app */
.reuniao .field__input,
.tarefa-nova .field__input { font-family: var(--font); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; }
/* Dentro do quadro cinza do periodo o chip solto e da cor do FUNDO da
   pagina, senao cinza sobre cinza ele some (no computador a faixa nao tem
   quadro, e o chip volta a ser o cinza de superficie). */
.periodo .chip:not([aria-pressed="true"]) { background: var(--bg); }
@media (min-width: 900px) {
  .painel__topo .periodo .chip:not([aria-pressed="true"]) { background: var(--surface); }
}
/* o chip com numero: nome e numero na MESMA linha de base, e a linha
   no MEIO do chip. Em flex o baseline faz as duas coisas virarem uma so
   e encosta o texto no alto (era o que deixava a palavra 9px acima do
   centro); em grid o `align-items` cuida do alinhamento entre nome e
   numero e o `align-content` centra a linha. Igual ao .subaba. */
.painel__galhos-fila > .chip {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  justify-content: center;
}
/* ============================================================
   A FILA DE DENUNCIAS (migration 0085)
   ------------------------------------------------------------
   Uma linha por denuncia: o que foi denunciado na esquerda, o que fazer
   na direita. No celular as acoes descem pra baixo do texto, porque tres
   botoes do lado de uma frase nao caberiam sem cortar a frase.

   O amarelo (`--acao-*`, a cor de "pede olhar" do painel) e a BORDA da
   linha que passou de 24 horas, e nao o fundo dela: o fundo amarelo
   deixaria o texto da denuncia mais dificil de ler justamente na linha
   que mais precisa ser lida.
   ============================================================ */
.den-fila { margin-top: var(--gap); }
.den {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--gap-sm) var(--gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--surface);
}
.den + .den { margin-top: 6px; }
.den.is-velha { border-color: var(--acao-texto); }
.den__main { flex: 1 1 auto; min-width: 0; }
.den__titulo { font-weight: 600; }
.den__detalhe,
.den__tratada { margin-top: 4px; }
.den__acoes {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

@media (max-width: 640px) {
  .den { flex-direction: column; }
  .den__acoes { width: 100%; }
}

/* ---------- o cupom nas lojas (0113) ---------- */
.link__cupom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.link__cupom p { flex: 1 1 260px; min-width: 0; line-height: 1.5; }
.link__cupom-sep { margin: 0 4px; }
.cupons-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cupons-resumo p { flex: 1 1 320px; min-width: 0; }

/* ---------- os relogios (0115) ---------- */
.relogios__linha { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.relogios__linha > :first-child { flex: 1 1 160px; }
.relogios__linha.is-off { opacity: .6; }

/* ============================================================
   Assessorias: licencas e beneficios (0122, 11/10/2026)
   ============================================================ */
.lic-abre { text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.lic-abre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.lic-tag { flex: none; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); }
.lic-tag--ativa { background: var(--certo); color: var(--on-accent); }
.lic-tag--cheia { background: var(--warn); color: #3D2C00; }
.lic-tag--parada { background: #C4271C; color: #FFFFFF; }
.lic-pedido { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 4px; }
.lic-recado { padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-2); margin: 0 0 12px; }
.lic-lista { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; list-style: disc; }
.lic-link { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.lic-sel { display: inline-flex; align-items: center; gap: 8px; }
.lic-sel .field__input { width: auto; padding: 7px 10px; font-size: var(--fs-sm); }
.lic-apagado { opacity: .6; }
.lic-hist summary { cursor: pointer; }