/*
 * O sistema visual do Tino.
 *
 * Sem sombra em lugar nenhum: a separacao e sempre por borda e por fundo.
 * Isso vem do arquivo de design e e uma boa decisao - sombra empilhada em
 * tela pequena vira sujeira, e o produto e para ser lido de relance, com
 * uma mao, na fila do mercado.
 */

:root {
  --fundo: #E7EAE5;
  --tela: #F3F5F1;
  --papel: #FFFFFF;
  --critico-claro: #FBEAEA;
  --recuo: #F1F3F0;
  --recuo-2: #F6F8F5;

  --tinta: #14201E;
  --tinta-2: #3F4B48;
  --tinta-3: #62706C;
  --tinta-4: #93A09C;

  --linha: #E1E5E0;
  --linha-2: #DDE2DC;
  --linha-3: #EEF1EE;

  --marca: #0E6B5C;
  --marca-escura: #0A5346;
  --marca-clara: #E7F1ED;

  --positivo: #1F7A46;
  --positivo-claro: #E8F4EC;
  --atencao: #8A5A0B;
  --atencao-clara: #FFF8EC;
  --atencao-linha: #F0E0C2;
  --critico: #A3341F;
  --critico-clara: #FDF0ED;

  --r-p: 11px;
  --r-m: 14px;
  --r-g: 18px;
  --r-gg: 22px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--tinta-4); }

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-escura); }

/* Numero em tabela alinha na coluna, e nao dança quando o valor muda. */
.n { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }

/*
 * Barra de rolagem some em tudo que rola de lado.
 *
 * Nao e capricho: a barra do sistema aparece por cima do conteudo em tela
 * pequena e some sozinha depois de um segundo - fica um fantasma cinza
 * atravessando o desenho. Quem rola de lado descobre pelo conteudo cortado
 * na borda, que e como todo aplicativo de celular faz.
 */
.r::-webkit-scrollbar,
.sugestoes::-webkit-scrollbar,
.pilulas::-webkit-scrollbar,
.faixa-semana::-webkit-scrollbar,
.fita-trilho::-webkit-scrollbar,
.barra-busca::-webkit-scrollbar { width: 0; height: 0; }

.r, .sugestoes, .pilulas, .faixa-semana, .fita-trilho { scrollbar-width: none; }

/* ---------------------------------------------------------- tipografia */

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 24px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p  { margin: 0; }

.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-4);
}
.suave { font-size: 13px; color: var(--tinta-3); line-height: 1.5; }
.mini  { font-size: 12px; color: var(--tinta-4); }

/* ------------------------------------------------------------- cartoes */

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  padding: 16px;
}
.cartao + .cartao { margin-top: 12px; }
.cartao.plano { background: var(--recuo-2); }
.cartao.marca { background: var(--marca-clara); border-color: #CFE3DC; }
.cartao.atencao { background: var(--atencao-clara); border-color: var(--atencao-linha); }
.cartao.critico { background: var(--critico-clara); border-color: #F3D6CF; }

.cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}

/* --------------------------------------------------------------- botao */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 18px;
  background: var(--marca); color: #fff;
  border: none; border-radius: var(--r-m);
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: background .12s;
}
.botao:hover { background: var(--marca-escura); }
.botao:disabled { opacity: .45; cursor: default; }
.botao.largo { width: 100%; }
.botao.pequeno { height: 36px; padding: 0 13px; font-size: 13px; border-radius: var(--r-p); }

.botao.calmo { background: var(--recuo); color: var(--tinta); }
.botao.calmo:hover { background: var(--linha-3); }
.botao.contorno { background: transparent; color: var(--tinta); border: 1px solid var(--linha-2); }
.botao.contorno:hover { background: var(--recuo); }
.botao.perigo { background: transparent; color: var(--critico); border: 1px solid #F3D6CF; }
.botao.perigo:hover { background: var(--critico-clara); }

/* --------------------------------------------------------------- campo */

.campo {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--papel); border: 1px solid var(--linha-2);
  border-radius: var(--r-m); font-size: 15px;
}
.campo:focus { outline: none; border-color: var(--marca); }
textarea.campo { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.campo { appearance: none; background-image: none; }

.grupo { display: grid; gap: 6px; }
.grupo > label { font-size: 13px; font-weight: 600; color: var(--tinta-2); }

/* --------------------------------------------------------------- linha */

.linha-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linha-3);
}
.linha-item:last-child { border-bottom: none; }
.linha-item .corpo { flex: 1; min-width: 0; }
/*
 * As reticencias so valem em caixa de bloco.
 *
 * A regra estava escrita desde sempre e nunca funcionou: o titulo e um
 * span inline, e em inline o navegador ignora overflow e text-overflow.
 * Uma descricao longa - "pagamento de cliente via cartao de credito" -
 * empurrava a tela inteira de lado no celular, em vez de terminar em
 * reticencias. E o mesmo esquecimento que a .meta aqui embaixo ja teve.
 */
.linha-item .titulo {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*
 * A meta e a segunda linha, e nao a continuacao da primeira.
 *
 * Como span inline ela so descia quando havia uma quebra de linha no
 * HTML entre as duas tags - e onde nao havia, saia
 * "Ligar para o contadoratrasada" na tela inicial. O margin-top ja dizia
 * que a intencao era empilhar; faltava o display.
 */
.linha-item .meta { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.linha-item .valor { font-size: 15px; font-weight: 700; white-space: nowrap; }

.inicial {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  background: var(--marca-clara); color: var(--marca);
  border-radius: 11px; font-size: 13px; font-weight: 800;
}

.icone-caixa {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  background: var(--recuo); border-radius: var(--r-p);
}

/* ---------------------------------------------------------------- selo */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--recuo); color: var(--tinta-2);
}
.selo.marca { background: var(--marca-clara); color: var(--marca); }
.selo.positivo { background: var(--positivo-claro); color: var(--positivo); }
.selo.atencao { background: var(--atencao-clara); color: var(--atencao); }
.selo.critico { background: var(--critico-clara); color: var(--critico); }

/* -------------------------------------------------------------- barras */

.barra { height: 7px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 4px; background: var(--marca); }
.barra > i.atencao { background: var(--atencao); }
.barra > i.critico { background: var(--critico); }
.barra > i.positivo { background: var(--positivo); }

/* ------------------------------------------------------- tipo de conta */

/*
 * Dezesseis tipos nao cabem numa lista solta.
 *
 * O seletor abre no lugar, e nao numa segunda folha por cima da primeira:
 * folha sobre folha e o caminho mais curto para a pessoa perder de vista
 * o que estava preenchendo. A busca aparece junto porque quem sabe o nome
 * do seu tipo nao deveria varrer dezesseis linhas para achar.
 */
.seletor-tipo { position: relative; }
.seletor-atual {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; cursor: pointer; text-align: left;
  background: var(--recuo); border: 1px solid var(--linha-2);
  border-radius: var(--r-p); font-family: inherit; color: var(--tinta);
}
.seletor-atual:hover { border-color: var(--marca); }
.seletor-atual strong { display: block; font-size: 14.5px; font-weight: 700; }
.seletor-atual .mini { display: block; margin-top: 1px; }
.seletor-atual svg { flex: 0 0 auto; transition: transform .15s; }
.seletor-tipo.aberto .seletor-atual svg { transform: rotate(180deg); }

.seletor-lista {
  margin-top: 8px; padding: 10px; background: var(--papel);
  border: 1px solid var(--linha-2); border-radius: var(--r-p);
}
.seletor-busca { height: 38px; margin-bottom: 8px; }
.seletor-opcoes { max-height: 240px; overflow-y: auto; display: grid; gap: 4px;
  scrollbar-width: thin; scrollbar-color: var(--linha-2) transparent; }
.seletor-opcao {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 11px; background: none; border: 1px solid transparent;
  border-radius: var(--r-p); font-family: inherit; color: var(--tinta);
}
.seletor-opcao:hover { background: var(--recuo); }
.seletor-opcao.escolhido { background: var(--marca-clara); border-color: var(--marca); }
.seletor-opcao strong { display: block; font-size: 14px; font-weight: 700; }
.seletor-opcao.escolhido strong { color: var(--marca); }
.seletor-nada { padding: 8px 11px; }

/*
 * Os campos que dependem do tipo ficam visivelmente presos ao tipo.
 *
 * Soltos logo abaixo do seletor, pareciam parte dele: quem trocava de tipo
 * via campo aparecer e sumir sem entender de onde vinha. A moldura e o
 * titulo dizem a relacao sem precisar de texto explicando.
 */
.campos-do-tipo {
  padding: 12px 14px 14px; background: var(--recuo-2);
  border: 1px solid var(--linha); border-radius: var(--r-p);
}
.campos-do-tipo > .rotulo { margin-bottom: 10px; color: var(--marca); }
.campos-do-tipo[hidden] { display: none; }

/*
 * Apelido e etiqueta, e nao texto separado por virgula.
 *
 * Num campo so, a pessoa escreve "meu salario, o roxinho" e aquilo vira um
 * apelido unico que ninguem jamais vai falar desse jeito - e a conversa
 * nunca acha a conta.
 */
.apelidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.apelidos:empty { display: none; }
.apelido {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; background: var(--marca-clara);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--marca);
}
.apelido button {
  width: 18px; height: 18px; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--marca); font-size: 15px; line-height: 1; opacity: .65;
}
.apelido button:hover { background: #CFE3DC; opacity: 1; }

/* -------------------------------------------------------------- perfil */

/*
 * A edicao acontece na propria linha.
 *
 * Abrir e fechar uma janela para trocar cinco letras faz uma correcao
 * simples parecer um formulario - e quem chega so para conferir o cadastro
 * acaba nao mexendo em nada. O lapis so aparece quando o ponteiro passa
 * por cima, para a tela em repouso ser leitura, e nao um painel de botoes.
 */
/*
 * O perfil e uma grade, e nao uma pilha.
 *
 * Numa tela larga a coluna unica deixava metade da janela vazia a direita,
 * e as linhas de rotulo e valor ficavam perdidas numa faixa estreita no
 * meio. Aqui a capa e "Voce" ficam na coluna larga - sao as que mais se le
 * - e o resto acompanha ao lado. Abaixo de 900px vira pilha sozinho.
 *
 * @container, e nao @media - e essa palavra e a correcao.
 *
 * A regra era "ligue duas colunas quando a JANELA tiver 900px". No
 * computador a janela tem mil e duzentos, e o aplicativo roda dentro de uma
 * moldura de 402: as duas colunas ligavam ali dentro. Cada cartao ficava
 * com 171px, o rotulo sozinho comia 96, e o nome da pessoa era desenhado
 * UMA LETRA POR LINHA.
 *
 * @container pergunta a largura de quem esta em volta, que e a pergunta que
 * a tela sempre quis fazer. Serve as duas caras com a mesma regra, e passa
 * a valer tambem dentro da folha, que e estreita em qualquer tela.
 */
.perfil { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.perfil > .cartao { margin-top: 0; }
.perfil-coluna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.perfil-coluna > .cartao + .cartao { margin-top: 0; }

@container (min-width: 900px) {
  .perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* A capa atravessa as duas: e o nome da pessoa, e nao um dado ao lado
     de outro. */
  .perfil > .perfil-capa { grid-column: 1 / -1; }

  /*
   * As duas colunas terminam na mesma linha.
   *
   * Uma acabando trinta pixels antes da outra e o tipo de folga que
   * ninguem sabe nomear e todo mundo enxerga - le como descuido. O ultimo
   * cartao de cada lado estica o que faltar, e a base fica reta.
   */
  .perfil-coluna > .cartao:last-child { flex: 1; }
}


/*
 * Navegador sem container query cai aqui.
 *
 * Vale so a partir de 1100px de JANELA: acima disso a moldura do aplicativo
 * ja e a tela inteira do celular de verdade, ou o painel, e nos dois casos
 * ha espaco. Abaixo, a pilha e a resposta certa de qualquer jeito.
 */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .perfil > .perfil-capa { grid-column: 1 / -1; }
    .perfil-coluna > .cartao:last-child { flex: 1; }
  }
}

/*
 * A capa do perfil: inicial, nome e selo.
 *
 * Sao tres coisas numa linha so, e no telefone a linha tem 320px uteis. A
 * inicial come 52 e o selo "administrador" come 93: sobram 147 para o nome,
 * e "Manoel Pereira Junior" quebra no meio. O nome da pessoa e a unica
 * coisa nesta tela que ela ja sabe de cor — ver o proprio nome partido e o
 * primeiro sinal de que o resto tambem nao merece confianca.
 *
 * Entao a linha DOBRA em vez de espremer: o selo desce sozinho quando o
 * nome nao tem 12rem, e volta para o lado no painel, onde sobra espaco.
 * Quem decide e a largura de verdade, nao um ponto de corte escolhido a mao.
 */
.perfil-capa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* 12rem e o basico que "Manoel Pereira Junior" pede para caber inteiro. */
.perfil-quem { flex: 1 1 12rem; }

/* Descendo sozinho, o selo continua alinhado a direita e nao fica solto
   embaixo da inicial. */
.perfil-capa > .selo { margin-left: auto; }
.perfil-inicial {
  width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
  background: var(--marca); color: #fff; border-radius: 16px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em;
}
.perfil-quem { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perfil-quem strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

/*
 * A linha e compacta de proposito.
 *
 * Sao seis linhas de duas informacoes cada: com respiro de sobra a tela
 * dobra de altura e a pessoa rola para ver o que caberia numa vista so.
 * A altura de linha entra explicita porque a herdada do corpo e feita
 * para paragrafo, e aqui nao ha paragrafo nenhum.
 */
.perfil-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linha-3);
}
.perfil-linha:last-child { border-bottom: none; }
.perfil-rotulo {
  flex: 0 1 132px; min-width: 96px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--tinta-4);
}
.perfil-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.perfil-valor { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tinta); word-break: break-word; }
/*
 * "em-branco", e nao "vazio".
 *
 * `.vazio` ja existia como o bloco de estado vazio das outras telas - 34
 * pixels de respiro e texto centralizado - e a linha do telefone herdou
 * tudo isso, virando tres vezes a altura das vizinhas. Classe curta em
 * folha de estilo comum e nome que ja esta ocupado.
 */
.perfil-valor.em-branco { color: var(--tinta-4); font-weight: 500; font-style: italic; }
.perfil-meta { font-size: 12px; line-height: 1.35; color: var(--tinta-4); }

.perfil-editar {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--tinta-4); opacity: 0; transition: opacity .12s;
}
.perfil-linha:hover .perfil-editar,
.perfil-editar:focus-visible { opacity: 1; }
.perfil-editar:hover { background: var(--recuo); color: var(--marca); }

/* No toque nao ha ponteiro para passar por cima: ali o lapis fica sempre
   visivel, senao o campo parece nao ter como editar. */
@media (hover: none), (max-width: 720px) {
  .perfil-editar { opacity: 1; }
}

.perfil-linha.editando { background: var(--recuo-2); border-radius: var(--r-p); padding: 12px 10px; }
.perfil-linha.editando .perfil-rotulo { padding-left: 2px; }
.perfil-entrada { height: 40px; font-size: 15px; }
.perfil-acoes { display: flex; gap: 8px; margin-top: 8px; }

/* Numa coluna estreita os tres tons empilham; so lado a lado quando ha
   largura de sobra, senao o texto de cada um quebra em quatro linhas. */
.perfil-plano-nome {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  margin: 2px 0 6px;
}
.perfil-plano-acoes {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; margin-top: 16px;
}

/* Os dados da assinatura usam a mesma linha do resto do perfil: e a
   mesma leitura de rotulo e valor, e inventar outra forma aqui faria o
   cartao parecer de outro produto. */
.plano-dados { margin-top: 14px; border-top: 1px solid var(--linha-3); }
.plano-dados .perfil-linha:last-child { border-bottom: none; padding-bottom: 0; }

.plano-lista { display: grid; gap: 8px; }
.plano-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; background: var(--recuo-2);
  border: 1px solid var(--linha); border-radius: var(--r-p);
}
.plano-opcao-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plano-opcao-quem strong { font-size: 14px; font-weight: 700; }

.perfil-tons { display: grid; gap: 8px; }
.perfil-tom {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; background: var(--papel); cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--r-m);
  font-family: inherit; color: var(--tinta);
}
.perfil-tom:hover { border-color: var(--linha-2); }
.perfil-tom strong { font-size: 14px; font-weight: 700; }
.perfil-tom.escolhido { border-color: var(--marca); background: var(--marca-clara); }
.perfil-tom.escolhido strong { color: var(--marca); }

/* Os tres tons so ficam lado a lado quando a coluna e a tela inteira.
   Dentro de uma das duas colunas o texto de cada um quebraria em quatro
   linhas, e tres blocos altos e estreitos leem pior que tres empilhados. */
@media (min-width: 560px) and (max-width: 899px) {
  .perfil-tons { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .perfil-linha { flex-wrap: wrap; }
  .perfil-rotulo { flex: 0 0 100%; }
}

/* ------------------------------------------------------------ conversa */

/*
 * A conversa e a mesma nas duas caras.
 *
 * Ela nasceu so no aplicativo, e quando o painel ganhou a dele o desenho
 * teria de ser copiado - duas copias da mesma bolha envelhecem em ritmos
 * diferentes, e um dia a resposta do assistente fica bonita num lado e
 * torta no outro. O que muda entre as duas e a largura, e isso o proprio
 * container resolve.
 */

/* --------------------------------------------------------- conversa */

/*
 * A barra de rolagem fica visivel, so que discreta.
 *
 * Escondida, nada dizia que havia conversa acima - e quem chega numa tela
 * cheia nao descobre que da para subir. Discreta resolve os dois: aparece
 * o quanto basta para dizer "tem mais", sem virar moldura.
 */
.fluxo {
  flex: 1; overflow-y: auto; padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: var(--linha-2) transparent;
  overscroll-behavior: contain;
}
.fluxo::-webkit-scrollbar { width: 8px; }
.fluxo::-webkit-scrollbar-track { background: transparent; }
.fluxo::-webkit-scrollbar-thumb {
  background: var(--linha-2); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.fluxo:hover::-webkit-scrollbar-thumb { background: var(--tinta-4); background-clip: content-box; }
.bolha {
  /* flex-shrink 0 nao e detalhe: a conversa e uma coluna flex com
     rolagem, e sem isto cada bolha era espremida para caber na altura
     visivel. Era essa a deformacao do quadro de confirmacao. */
  flex: 0 0 auto;
  max-width: 84%; border-radius: var(--r-g); overflow: hidden;
  /* Bolha com painel usa quase toda a largura: lista apertada nao se le. */
  /* Bolha com painel usa quase toda a largura: lista apertada nao se le. */
  font-size: 14.5px; line-height: 1.5; word-break: break-word;
}
/* O pre-wrap fica SO no texto. Quando estava na bolha inteira, cada
   quebra de linha do HTML do recibo virava linha em branco de verdade -
   era isso que inchava o quadro. */
.bolha .texto { display: block; padding: 11px 14px 4px; white-space: pre-wrap; }

/*
 * A hora vai dentro da bolha, embaixo e a direita.
 *
 * E onde o olho ja procura, porque e onde o WhatsApp poe - e numa conversa
 * sobre dinheiro ela nao e enfeite: "gastei 50 no mercado" as 9h e as 19h
 * sao dois gastos, e sem a hora a pessoa nao consegue dizer se anotou duas
 * vezes ou gastou duas vezes.
 */
.bolha .hora {
  display: block; padding: 0 14px 8px; text-align: right;
  font-size: 11px; font-variant-numeric: tabular-nums; opacity: .55;
}
.bolha.eu .hora { opacity: .75; }

/* O dia separa os blocos, como no aplicativo de mensagem que todo mundo
   ja tem aberto. Sem ele, a conversa de ontem cola na de hoje. */
.dia-conversa {
  align-self: center; margin: 4px 0;
  padding: 4px 12px; border-radius: 999px;
  background: var(--recuo); color: var(--tinta-4);
  font-size: 11.5px; font-weight: 700; text-transform: capitalize;
}
.bolha.ele { align-self: flex-start; background: var(--papel); border: 1px solid var(--linha); }
.bolha.eu  { align-self: flex-end; background: var(--marca); color: #fff; }
.bolha.erro { background: var(--critico-clara); border-color: #F3D6CF; color: var(--critico); }
.bolha:has(.painel) { max-width: 96%; }
/* O recibo, como no design: uma faixa curta dizendo que anotei, e a
   saida ao lado. A frase acima ja disse o valor e o que foi - repetir
   tudo num quadro grande e ocupar a tela com o que a pessoa acabou de
   ler. */
.recibo {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 14px; background: var(--positivo-claro);
}
.recibo-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.recibo-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 4px 9px; border-radius: 999px;
  background: var(--papel); border: 1px solid transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta svg { flex: 0 0 auto; opacity: .55; }
.etiqueta.aberta {
  background: transparent; border-color: var(--linha);
  color: var(--tinta-3); font-weight: 500; font-style: italic;
}
.etiqueta.calada { color: var(--tinta-4); }
.recibo.desfeito .recibo-etiquetas { display: none; }
.recibo .anotei {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--positivo);
}
.recibo .anotei svg { flex: 0 0 auto; }
.recibo-desfazer {
  flex: 0 0 auto; background: none; border: none; padding: 0;
  font-size: 13.5px; font-weight: 700; color: var(--tinta-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.recibo-desfazer:hover { color: var(--tinta); }
.recibo.desfeito { background: var(--recuo); }
.recibo.desfeito .anotei { color: var(--tinta-3); }

/* Botao que parece link: para acao secundaria dentro de texto corrido. */
.ligacao {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--tinta-4); text-decoration: underline;
}
.ligacao:hover { color: var(--tinta-2); }

/* ----------------------------------------------------------------- racha */

/*
 * A conversa do racha vive dentro de um cartao, e nao no pe da tela.
 *
 * Na pagina do convidado a conversa nao e a tela inteira: ela vem depois da
 * conta, que e o que a pessoa abriu o link para ver. Altura fixa para o
 * resto da pagina continuar alcancavel com o polegar.
 */
.conversa-racha { padding: 0; overflow: hidden; }
.conversa-racha .fluxo {
  display: flex; flex-direction: column; gap: 10px;
  height: 260px; overflow-y: auto; padding: 16px;
}
.conversa-racha .barra-fala { border-top: 1px solid var(--linha-3); }



/*
 * "Quem entra nessa despesa" aparece nas tres caras: na pagina do
 * convidado, no aplicativo e no painel. Ficha marcada, e nao caixinha de
 * formulario - a pessoa esta em pe segurando uma cerveja.
 */
.quem-entra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.quem-entra label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; background: var(--recuo); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--tinta-2); cursor: pointer;
}
.quem-entra label:has(input:checked) { background: var(--marca-clara); color: var(--marca); }
.quem-entra input { accent-color: var(--marca); }

/* O link e para copiar, e nao para digitar: o campo so existe para dar
   onde clicar quando a area de transferencia nao estiver disponivel. */
.linha-link { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.linha-link .campo { flex: 1; min-width: 0; font-size: 13px; }

/* Titulo de secao com um botao na mesma linha. */
.entre-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.entre-titulo > .rotulo { margin: 0; }

/* --------------------------------------------------------- barra de fala */

/*
 * A barra de digitar, escrita uma vez so.
 *
 * Ela morava dentro dos dois blades, uma copia em cada, e as copias ja
 * tinham divergido sem ninguem decidir: o botao redondo era 44px no
 * aplicativo e 46 no painel, e o icone dentro da pilula 34 contra 36. Foi a
 * segunda copia envelhecendo sozinha - que e o motivo de a regra da casa
 * mandar o desenho comum para ca.
 *
 * E uma terceira pagina, a do convidado do racha, nao teria como desenhar
 * barra nenhuma sem uma terceira copia.
 *
 * Os tamanhos que ficam sao os do aplicativo, porque o celular e quem tem o
 * dedo grande e a tela apertada. O painel mantem os dele por sobrescrita
 * explicita mais abaixo, para esta arrumacao nao mexer em pixel nenhum.
 */
.barra-fala {
  flex: 0 0 auto; display: block;
  padding: 10px 12px; background: var(--papel);
  border-top: 1px solid var(--linha-3);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/*
 * `hidden` precisa vencer o `display` que damos as linhas. O atributo vem
 * da folha do navegador, que perde de qualquer regra nossa - e o estado
 * escondido passa a ocupar espaco em silencio.
 */
.barra-fala [hidden] { display: none !important; }

.barra-fala input:focus { outline: none; }

.redondo {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  background: var(--recuo); border: none; border-radius: 50%;
  cursor: pointer; color: var(--tinta-2);
}
.redondo:hover { background: var(--linha-3); }
.redondo.principal { background: var(--marca); color: #fff; }
.redondo.principal:hover { background: var(--marca-escura); }
.redondo.gravando { background: var(--critico); color: #fff; animation: pulso 1.1s infinite; }

@keyframes pulso { 50% { opacity: .55; } }

/*
 * Uma linha so: a pilula com o texto e a camera dentro, e um botao redondo
 * a direita. Foi copiado do WhatsApp de proposito - e o gesto que a mao de
 * qualquer brasileiro ja sabe fazer sem ler nada.
 */
.linha-fala { display: flex; align-items: center; gap: 8px; width: 100%; }

.campo-fala {
  flex: 1; min-width: 0; display: flex; align-items: center;
  height: 46px; padding: 0 6px 0 16px;
  background: var(--recuo); border-radius: 999px;
}
.campo-fala input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--tinta);
}
.campo-fala input::placeholder { color: var(--tinta-4); }
.campo-fala .dentro {
  flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--tinta-3);
}
.campo-fala .dentro:hover { background: var(--linha-3); color: var(--tinta-2); }

/*
 * No painel a barra mora dentro de um cartao, e nao no pe do aparelho: nao
 * ha borda de tela para respeitar embaixo. Os 46px do botao e os 36 do
 * icone sao os que estao no ar hoje - mudar isso agora faria uma arrumacao
 * virar redesenho, e nesta fase nada pode mexer na tela.
 */
.conversa-web .barra-fala { padding: 10px 14px 14px; }
.conversa-web .redondo { width: 46px; height: 46px; flex: 0 0 46px; }
.conversa-web .campo-fala input { height: 100%; }
.conversa-web .campo-fala .dentro { width: 36px; height: 36px; flex: 0 0 36px; }
.conversa-web .campo-fala .dentro:hover { color: var(--tinta); }

/* --------------------------------------------------- painel na conversa */

.painel { border-top: 1px solid var(--linha-3); padding: 12px 14px 4px; }
.painel-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.painel-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-4);
}
.painel-destaque { font-size: 13.5px; font-weight: 800; }

.painel-linha { padding: 8px 0; border-bottom: 1px solid var(--linha-3); }
.painel-linha:last-of-type { border-bottom: none; }
.painel-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.painel-nome {
  font-size: 13.5px; font-weight: 600; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-valor { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.painel-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--tinta-4); }

.painel-barra {
  display: block; height: 5px; margin-top: 6px;
  background: var(--linha-3); border-radius: 3px; overflow: hidden;
}
.painel-barra i { display: block; height: 100%; background: var(--marca); border-radius: 3px; }
.painel-linha.atencao .painel-barra i { background: var(--atencao); }
.painel-linha.critico .painel-barra i { background: var(--critico); }
.painel-linha.positivo .painel-barra i { background: var(--positivo); }
.painel-linha.critico .painel-nome { color: var(--critico); }

/*
 * As sugestoes ficaram para tras na primeira mudanca, e no painel elas
 * apareceram como botao cru - quadrado, sem borda arredondada. Era a
 * prova de que o bloco tinha sido partido no lugar errado: sugestao e
 * conversa, e nao um enfeite do aplicativo.
 */
.sugestoes { display: flex; gap: 7px; overflow-x: auto; padding: 0 12px 10px; }
.sugestoes button {
  flex: 0 0 auto; height: 32px; padding: 0 13px; background: var(--papel);
  border: 1px solid var(--linha-2); border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--tinta-2); white-space: nowrap; cursor: pointer;
}
.sugestoes button:hover { border-color: var(--marca); color: var(--marca); }

/* ------------------------------------------------------- pontos do dia */

/*
 * Dois pontos sao dois TIPOS, e nao duas coisas.
 *
 * Moravam duas vezes no aplicativo (na grade do mes e na faixa da semana)
 * e em lugar nenhum no painel - e por isso a mesma informacao aparecia de
 * um jeito num lado e nao aparecia no outro. Cor sem legenda e um codigo
 * que so quem fez o produto conhece, entao a legenda vem junto.
 */
.pontos { display: flex; gap: 3px; height: 5px; }
.pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--marca); }
.pontos i.dinheiro { background: var(--atencao); }

.legenda {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha-3);
  font-size: 11.5px; color: var(--tinta-4);
}
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
.legenda i.dinheiro { background: var(--atencao); }

/* --------------------------------------------------------------- abas */

.abas {
  display: flex; gap: 4px; padding: 3px;
  background: var(--recuo); border-radius: var(--r-m);
}
.abas button {
  flex: 1; height: 34px; border: none; background: transparent;
  border-radius: var(--r-p); font-size: 13px; font-weight: 700; color: var(--tinta-3);
}
.abas button.ativo { background: var(--papel); color: var(--tinta); }

.pilulas { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.pilulas button {
  flex: 0 0 auto; height: 32px; padding: 0 13px;
  background: var(--papel); border: 1px solid var(--linha-2); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2); white-space: nowrap;
}
.pilulas button.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* --------------------------------------------------------------- vazio */

.vazio {
  padding: 34px 20px; text-align: center;
  color: var(--tinta-3); font-size: 14px; line-height: 1.55;
}
.vazio strong { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 5px; }

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

.esqueleto {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--linha-3) 25%, var(--recuo) 37%, var(--linha-3) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease infinite;
}
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------- aviso */

.tostada {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  z-index: 90; max-width: min(460px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--r-m);
  background: var(--tinta); color: #fff; font-size: 14px; font-weight: 600;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.tostada.ver { transform: translateX(-50%) translateY(0); }
.tostada.erro { background: var(--critico); }

/* --------------------------------------------------------------- folha */

.cortina {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 32, 30, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
/* Dentro do quadro do aparelho, a cortina cobre o quadro - e nao a janela. */
.cortina.dentro { position: absolute; }
.cortina.ver { opacity: 1; pointer-events: auto; }

.folha {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88%; overflow-y: auto;
  background: var(--papel); border-radius: var(--r-gg) var(--r-gg) 0 0;
  padding: 8px 18px 22px;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.cortina.ver .folha { transform: translateY(0); }
.folha .puxador {
  width: 38px; height: 4px; border-radius: 3px; background: var(--linha-2);
  margin: 6px auto 14px;
}

/*
 * No computador a folha vira um cartao centralizado - mas so quando esta
 * solta na pagina. Dentro do aparelho ela continua subindo de baixo, que
 * e o gesto do celular.
 */
@media (min-width: 720px) {
  .cortina:not(.dentro) { display: grid; align-items: start; }

  .cortina:not(.dentro) .folha {
    position: relative; margin: 6vh auto;
    border-radius: var(--r-gg); transform: translateY(18px);
    padding: 22px 26px 26px;

    /*
     * Largura declarada, e nao max-width.
     *
     * Margem "auto" dentro de um grid desliga o stretch do item, e a
     * caixa encolhe ate caber o conteudo: o cadastro de conta abria com
     * 177px de largura numa tela de 1280, com "cartao de credito" cortado
     * no meio. O max-width sozinho nunca chegava a valer.
     */
    width: min(580px, 92vw);
    max-width: none;
  }

  /* O puxador e gesto de celular. No computador so ocupa espaco. */
  .cortina:not(.dentro) .folha .puxador { display: none; }

  .cortina:not(.dentro) .folha .cabeca { margin-bottom: 4px; }
  .cortina:not(.dentro) .folha h2 { font-size: 20px; }

  /*
   * Com largura de verdade, os pares de campo cabem lado a lado - e e
   * assim que se le "fecha dia / vence dia": junto, porque a decisao de
   * um depende do outro.
   */
  .cortina:not(.dentro) .folha .grade.d2 { gap: 16px; }
}

/* Folha larga em tela larga, e inteira em tela media. */
@media (min-width: 1100px) {
  .cortina:not(.dentro) .folha { width: min(640px, 88vw); }
}

/* Formulario dentro de folha nunca passa da largura de quem o contem. */
.folha .campo, .folha select, .folha textarea { max-width: 100%; }
.folha .grade.d2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------- grade */

.grade { display: grid; gap: 12px; align-items: stretch; }

/*
 * Dentro de uma grade, cada cartao ja tem a sua celula.
 *
 * O "cartao + cartao" existe para empilhar cartoes soltos numa coluna, e
 * ali dentro ele empurrava o segundo e o terceiro doze pixels para baixo:
 * a fileira inteira saia torta, com o primeiro cartao mais alto que os
 * vizinhos. O espaco entre celulas ja e o gap.
 */
.grade > .cartao + .cartao { margin-top: 0; }

/*
 * E altura cheia, para que a fileira termine junto.
 *
 * Sem isto, tres cartoes com textos de tamanhos diferentes acabam em tres
 * alturas diferentes - e o olho le desalinhamento como descuido, mesmo
 * sem saber nomear o que viu.
 */
.grade > .cartao { height: 100%; }
/*
 * minmax(0, 1fr), e nao 1fr.
 *
 * Uma coluna 1fr se recusa a ficar menor do que o conteudo dela, e o
 * "conteudo" de um cartao com texto longo e a palavra mais comprida. Com
 * minmax(0, ...) a coluna pode encolher e o texto quebra, que e o que a
 * pessoa espera.
 */
.grade.d2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.d3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/*
 * A grade colapsa pelo tamanho do PAI, e nao pelo da janela.
 *
 * Este e o defeito que quebrou a tela de perfil no celular: o aplicativo
 * roda dentro de uma moldura de 402px, e @media pergunta a largura da
 * JANELA - que no computador tem mil e duzentos. A media query nunca
 * disparava ali dentro, entao "Voce" e "Sua casa" ficavam lado a lado em
 * 171px cada, o rotulo sozinho comia 96, e o nome era desenhado uma letra
 * por linha.
 *
 * @container pergunta ao proprio pai. Serve as duas caras com a mesma
 * regra, e passa a valer tambem para a folha, que e estreita em qualquer
 * tela.
 */
.conteudo, .palco-central, .folha, .racha { container-type: inline-size; }

@container (max-width: 560px) {
  .grade.d2, .grade.d3 { grid-template-columns: minmax(0, 1fr); }
}

@container (min-width: 560px) and (max-width: 820px) {
  .grade.d3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Navegador sem container query ainda colapsa pelo tamanho da janela. */
@media (max-width: 640px) {
  .grade.d2, .grade.d3 { grid-template-columns: minmax(0, 1fr); }
}

/*
 * O numero grande manda na largura, nao o contrario.
 *
 * 30px fixos cabem em "R$ 480,00" e estouram em "R$ 13.550,00": o valor
 * quebrava depois do "R$" e as duas colunas do cartao ficavam com
 * alturas diferentes. Como a coluna e um container, o tamanho da fonte
 * pode sair dela - o numero encolhe ate caber e nunca quebra. Quem
 * ganhou mais nao merece um cartao pior.
 */
.numerao {
  font-size: clamp(17px, 13cqi, 30px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.grade > *, .cartao .grade > * { container-type: inline-size; min-width: 0; }
.numerao.critico { color: var(--critico); }
.numerao.positivo { color: var(--positivo); }


/* ------------------------------------------------------- fita de meses */

/*
 * A fita rola sozinha e o botao de periodo fica parado no fim, como nos
 * aplicativos de banco. Ele nao pode rolar junto: e o unico jeito de sair
 * do mes fechado, e sumir com ele seria esconder a saida.
 */
.fita-meses {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 14px;
}
.fita-trilho {
  flex: 1; min-width: 0; display: flex; gap: 6px;
  overflow-x: auto; scroll-behavior: smooth; padding: 2px 0;
}
.fita-mes {
  flex: 0 0 auto; height: 36px; padding: 0 14px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--tinta-3); white-space: nowrap;
}
.fita-mes:hover { background: var(--recuo); }
.fita-mes.agora { color: var(--marca); }
.fita-mes.escolhido {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}
.fita-periodo {
  flex: 0 0 42px; width: 42px; display: grid; place-items: center;
  background: var(--marca-clara); border: none; border-radius: var(--r-m);
  color: var(--marca);
}
.fita-periodo:hover { background: #D9EAE4; }

/* -------------------------------------------------------- busca e filtro */

.barra-busca { display: flex; gap: 8px; margin-bottom: 14px; }
.barra-busca .caixa {
  flex: 1; display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 13px;
  background: var(--recuo); border-radius: var(--r-m);
}
.barra-busca .caixa input {
  flex: 1; min-width: 0; border: none; background: transparent; font-size: 14.5px;
}
.barra-busca .caixa input:focus { outline: none; }
.barra-busca .filtrar {
  flex: 0 0 42px; width: 42px; display: grid; place-items: center;
  background: var(--marca-clara); border: none; border-radius: var(--r-m);
  color: var(--marca); position: relative;
}
.barra-busca .filtrar.ligado::after {
  content: ''; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--marca);
}

/* ------------------------------------------------------ fatia por forma */

.fatia { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.fatia + .fatia { border-top: 1px solid var(--linha-3); }
.fatia .barra { flex: 1; }


/* --------------------------------------------------- escolha com atalho */

.com-atalho { display: flex; gap: 8px; align-items: stretch; }
.com-atalho .campo { flex: 1; min-width: 0; }
.com-atalho .atalho {
  flex: 0 0 46px; width: 46px; display: grid; place-items: center;
  background: var(--marca-clara); border: none; border-radius: var(--r-m);
  color: var(--marca);
}
.com-atalho .atalho:hover { background: #D9EAE4; }


/* ------------------------------------------------ entrada ou saída */

/*
 * A inicial de quem lançou ocupava o lugar mais visível da linha sem
 * responder a pergunta que se faz ao abrir o extrato: isso entrou ou
 * saiu? Quem lançou desceu para a linha de baixo, onde informa sem
 * disputar espaço.
 */
.seta {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center; border-radius: 11px;
}
.seta.saiu { background: var(--recuo); color: var(--tinta-3); }
.seta.entrou { background: var(--positivo-claro); color: var(--positivo); }


/* -------------------------------------------------- entrar pelo Google */

.botao.claro {
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha);
}
.botao.claro:hover { background: var(--tela); }
.botao.com-marca { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* A separacao entre os dois caminhos, para nenhum parecer o unico. */
.ou {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--tinta-4); font-size: 12.5px;
}
.ou::before, .ou::after {
  content: ''; flex: 1; height: 1px; background: var(--linha);
}


/* ------------------------------------------------------- no papel */

/*
 * O relatorio impresso e o PDF que vai para o contador, e ele nao precisa
 * do menu, do botao de baixar nem da barra lateral - precisa dos numeros,
 * em preto no branco, sem gastar tinta com fundo colorido.
 */
@media print {
  .barra-lateral, .abas, .fita-meses, .barra-busca, .rodape-abas,
  .botao, .acao, .atalho, .cortina, .folha, .tostada { display: none !important; }

  body, .palco, .palco-central { background: #fff; padding: 0; margin: 0; }

  .cartao {
    break-inside: avoid;
    border: 1px solid #ccc;
    background: #fff;
    margin-bottom: 12px;
  }

  .cartao.marca, .cartao.plano, .cartao.atencao { background: #fff; }

  /* Cor de tinta economica, e contraste que sobrevive a impressora ruim. */
  * { color: #000 !important; }
  .suave, .mini, .rotulo { color: #444 !important; }

  a[href]::after { content: ''; }
}

/* ------------------------------------------------- retrospectiva anual */

/*
 * Doze colunas que cabem na largura, sem rolagem: o ano inteiro precisa
 * ser visto de uma vez, senao a comparacao entre meses se perde.
 */
.ano-colunas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; }
.ano-mes { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ano-pilha { display: flex; align-items: flex-end; gap: 3px; height: 132px; width: 100%; justify-content: center; }
.ano-barra { width: 44%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.ano-barra.entrou { background: var(--marca); opacity: .35; }
.ano-barra.saiu { background: var(--marca); }
.ano-rotulo { font-size: 11px; color: var(--tinta-4); text-transform: capitalize; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--marca);
  vertical-align: middle; margin-right: 3px; }
.ponto.entrou { opacity: .35; }
.citacao { border-left: 3px solid var(--marca); padding-left: 12px; line-height: 1.6; }
.linha-item .barra { width: 100%; }

@media (max-width: 720px) {
  .ano-colunas { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
}

/* --------------------------------------------------- escolha em cartao */

.cartao.escolha { border: 1px solid var(--linha); cursor: pointer; background: var(--papel); }
.cartao.escolha.escolhido { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.cartao.escolha .selo {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  color: var(--marca); white-space: nowrap;
}

/* ------------------------------------------------- comprovante de renda */

/*
 * O bloco que sobra na impressao.
 *
 * A pagina inteira vira PDF, mas so esta parte e o documento: as pilulas
 * de periodo e o botao de imprimir nao podem sair no papel que vai para a
 * imobiliaria.
 */
.folha-oficial { border: 1px solid var(--linha); border-radius: var(--r-g); padding: 22px; }

@media print {
  .nao-imprimir { display: none !important; }
  .folha-oficial { border: none; padding: 0; }
}

/* --------------------------------------------------------- quadro kanban */

/*
 * Tres colunas de altura igual, e nao de altura do conteudo.
 *
 * Coluna que encolhe quando esvazia tira o alvo de soltar justamente
 * quando ele mais importa: a primeira tarefa que entra em "Fazendo".
 */
.quadro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }

.coluna { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-g); padding: 12px; }
.coluna-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.coluna-topo h2 { font-size: 14px; margin: 0; }
.coluna-corpo { min-height: 140px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-m); }
.coluna-corpo.sobre { background: var(--marca-clara); outline: 2px dashed var(--marca); outline-offset: 2px; }
.coluna-vazia { color: var(--tinta-4); padding: 10px 4px; }

.carta {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-m);
  padding: 10px 12px; cursor: grab;
}
.carta.arrastando { opacity: .45; cursor: grabbing; }
.carta.atrasada { border-left: 3px solid var(--critico); }
.carta-titulo { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.35; }
.carta-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carta-setas { display: flex; gap: 4px; flex-shrink: 0; }

.acao-mini {
  border: 1px solid var(--linha); background: var(--papel); border-radius: var(--r-p);
  width: 24px; height: 24px; line-height: 1; font-size: 15px; color: var(--tinta-2); cursor: pointer;
}
.acao-mini:disabled { opacity: .3; cursor: default; }
.acao-mini:not(:disabled):hover { border-color: var(--marca); color: var(--marca); }

@media (max-width: 900px) {
  /* Rolagem lateral em vez de coluna espremida: um cartao de 90px de
     largura nao mostra titulo de tarefa nenhum. */
  .quadro { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}

/* ------------------------------------------------------- o guia */

/*
 * Os pontos de "quanto falta".
 *
 * Um "3 de 5" escrito também está lá em cima, mas número se lê e ponto se
 * vê: a pessoa mede o esforço restante de relance, sem interromper a
 * leitura para fazer conta.
 */
.pontos-do-guia {
  display: flex; gap: 6px; justify-content: center; margin-top: 16px;
}
.pontos-do-guia i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--linha-2); transition: all .25s ease;
}
.pontos-do-guia i.agora { width: 18px; border-radius: 3px; background: var(--marca); }

/* ============================================================ mascote */

/*
 * Uma moeda, e não um bicho.
 *
 * O produto é sobre dinheiro, e o mascote é a primeira coisa que a pessoa
 * vê na conversa: um rosto genérico seria simpático e não diria nada. A
 * borda interna é o que faz a forma ser lida como moeda e não como
 * bolinha, mesmo com 34 pixels.
 *
 * Ele morava só no aplicativo, e o painel — que tem a MESMA conversa —
 * ficava sem. Agora mora aqui, com o resto do que as duas caras dividem.
 *
 * TUDO AQUI ANIMA transform OU opacity, E NADA MAIS. São as duas
 * propriedades que o navegador resolve sozinho na placa de vídeo, sem
 * recalcular posição nem repintar pixel: o mascote custa o mesmo que uma
 * imagem parada, mesmo mexendo o tempo todo. Não há canvas, não há laço
 * de animação, não há imagem para baixar.
 *
 * Isso importa porque o produto é para celular simples. Um mascote com
 * laço próprio disputaria processador com o gravador de áudio — e aí
 * deixaria de ser enfeite para virar a razão de a gravação falhar.
 */
.mascote {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center; margin-right: 10px;
  cursor: pointer;

  /*
   * Para onde ele está olhando, de -1 a 1 em cada eixo.
   *
   * É variável de CSS, e não classe, porque o valor é contínuo: os olhos
   * seguem o que a pessoa digita e o ponteiro do mouse. Escrever uma
   * propriedade que só alimenta um transform não repinta nada — o
   * navegador recompõe a camada e pronto.
   */
  --olhar-x: 0;
  --olhar-y: 0;
}
.mascote .cara { display: block; will-change: transform; }
.mascote .moeda { fill: var(--marca); }
.mascote .borda { stroke: #fff; stroke-width: 1.4; opacity: .32; }
.mascote .olho { fill: #fff; transform-origin: center; }
.mascote:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 50%; }

/* O verso: o cifrão, na mesma cor dos olhos. */
.mascote .verso {
  fill: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: -0.03em; opacity: 0;
}
.mascote .boca { stroke: #fff; stroke-width: 2; opacity: .85; }

/*
 * Respirar e piscar: o suficiente para parecer vivo parado.
 *
 * O resto do repertório é EVENTUAL, e não contínuo. Movimento raro chama
 * o olho; movimento constante vira ruído no canto da tela de quem está
 * tentando escrever, e a pessoa aprende a não olhar para lá.
 */
.mascote .cara { animation: mascote-respira 4.5s ease-in-out infinite; }
.mascote .olhos { animation: mascote-pisca 6.2s ease-in-out infinite; }

@keyframes mascote-respira { 50% { transform: scale(1.05); } }
@keyframes mascote-pisca {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.08); }
}

/* ------------------------------------------------------- o olhar */

/*
 * Os olhos seguem o que está acontecendo.
 *
 * Enquanto a pessoa digita, eles descem na direção do campo e correm com
 * o cursor; no computador, seguem o ponteiro. É o gesto que mais faz um
 * desenho parecer atento, e custa uma linha: os olhos já são um grupo, e
 * mover o grupo é um transform.
 *
 * O deslocamento é pequeno de propósito — dois pixels e meio num desenho
 * de 34. Mais que isso, os olhos saem da moeda e viram outra coisa.
 */
.mascote .olhos {
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.mascote[data-olhando="1"] .olhos {
  /* Enquanto ele olha, o piscar automático sai do caminho: os dois animam
     a mesma propriedade, e o último a entrar ganharia. */
  animation: none;
  transform: translate(calc(var(--olhar-x) * 2.4px), calc(var(--olhar-y) * 1.8px));
}

/* ------------------------------------------------------- o giro */

/*
 * A moeda vira encolhendo na horizontal.
 *
 * É o mesmo truque de quem desenha moeda girando à mão: quando a largura
 * chega a zero, ela está de perfil — e é ali que a face troca. Não há
 * rotação em três dimensões, que num SVG pequeno só borra o desenho e
 * custa mais para o navegador compor.
 *
 * O gesto mora nesta caixa, e não no desenho: lá dentro ele brigaria com
 * a respiração, que anima a mesma propriedade.
 */
.mascote.gesto-girar { animation: mascote-gira 1.1s ease-in-out; }
.mascote.gesto-girar .frente { animation: mascote-face-vai 1.1s steps(1, end); }
.mascote.gesto-girar .verso { animation: mascote-face-vem 1.1s steps(1, end); }

@keyframes mascote-gira {
  0%, 100% { transform: scaleX(1); }
  24%, 76% { transform: scaleX(.04); }
  50% { transform: scaleX(1); }
}

/* A troca acontece exatamente no perfil, onde não há o que ver. */
@keyframes mascote-face-vai {
  0%, 24% { opacity: 1; }
  25%, 75% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@keyframes mascote-face-vem {
  0%, 24% { opacity: 0; }
  25%, 75% { opacity: 1; }
  76%, 100% { opacity: 0; }
}

/* --------------------------------------------------- o repertório */

/*
 * Seis gestos, e o toque nunca repete o anterior.
 *
 * Um mascote que faz sempre a mesma coisa é descoberto em três toques e
 * abandonado no quarto. O que prende é a dúvida sobre o que vem agora —
 * e para isso bastam meia dúzia de gestos curtos e um sorteio que evita o
 * último.
 *
 * Todos duram cerca de um segundo e terminam sozinhos. Nenhum deixa o
 * mascote num estado diferente do que estava: gesto é interjeição, não
 * mudança de assunto.
 */

/* Um pulo, com a aterrissagem amassando de leve. É o mais "sim!" de todos. */
.mascote.gesto-pular .cara { animation: mascote-pula .62s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mascote-pula {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.04); }
  62% { transform: translateY(0) scale(.94, 1.06); }
  80% { transform: translateY(-2px) scale(1); }
}

/* Balança a cabeça, como quem diz "opa". */
.mascote.gesto-balancar .cara { animation: mascote-balanca .6s ease-in-out; }
@keyframes mascote-balanca {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-13deg); }
  50% { transform: rotate(11deg); }
  78% { transform: rotate(-5deg); }
}

/* A volta inteira, no plano. O gesto mais chamativo, e por isso o mais raro. */
.mascote.gesto-rodar .cara { animation: mascote-roda .9s cubic-bezier(.5, 0, .3, 1); }
@keyframes mascote-roda {
  0% { transform: rotate(0deg) scale(1); }
  60% { transform: rotate(300deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Uma piscada só, do olho esquerdo. Cúmplice, e não sonolenta. */
.mascote.gesto-piscar .olhos { animation: none; }
.mascote.gesto-piscar .olho:first-child { animation: mascote-olho-fecha .5s ease-in-out; }
@keyframes mascote-olho-fecha {
  0%, 100% { transform: scaleY(1); }
  30%, 55% { transform: scaleY(.08); }
}

/* Espia para os lados, como quem procurou alguma coisa e não achou. */
.mascote.gesto-espiar .olhos { animation: mascote-espia 1.1s ease-in-out; }
@keyframes mascote-espia {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2.6px); }
  60% { transform: translateX(2.6px); }
}

/*
 * Tonto: só chega aqui quem cutucou cinco vezes seguidas.
 *
 * É o prêmio de quem foi atrás — e é o único gesto que reconhece que a
 * pessoa está brincando com o desenho em vez de usando o produto. Sem
 * ele, cutucar muito só produz o mesmo gesto de novo, que é a resposta de
 * um botão e não a de um bicho.
 */
.mascote.gesto-tonto .cara { animation: mascote-tonto 1.5s ease-in-out; }
.mascote.gesto-tonto .olhos { animation: mascote-tonto-olhos 1.5s ease-in-out; }
.mascote.gesto-tonto .boca { animation: mascote-tonto-boca 1.5s ease-in-out; }

@keyframes mascote-tonto {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(340deg) scale(1.06); }
  55% { transform: rotate(700deg) scale(1); }
  70% { transform: rotate(716deg); }
  82% { transform: rotate(704deg); }
  92% { transform: rotate(722deg); }
  100% { transform: rotate(720deg); }
}
@keyframes mascote-tonto-olhos {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(1.4px, -1px) scale(.8, 1.25); }
  60% { transform: translate(-1.4px, 1px) scale(1.25, .8); }
  80% { transform: translate(1px, 0) scale(.9, 1.15); }
}
/* A boca vira um "o" de tontura: um arco para cima é sorriso de cabeça
   para baixo, e é o desenho universal de quem rodou demais. */
@keyframes mascote-tonto-boca {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40%, 80% { transform: translateY(2.4px) scaleY(-1); }
}

/* ------------------------------------------------------- lendo */

/*
 * Escreveu, ele põe o óculos e lê.
 *
 * A primeira versão fazia os olhos seguirem o cursor do texto. Estava
 * tecnicamente certo e não se lia como nada: o movimento era lento demais
 * para ser notado e não contava história nenhuma.
 *
 * Ler conta. Os olhos varrem a linha e voltam ao começo — o gesto que
 * todo mundo reconhece sem legenda — e o óculos diz de uma vez o que eles
 * estão fazendo. Junto, os dois viram "ele está lendo o que você
 * escreve", que é exatamente o que está acontecendo do outro lado.
 */
.mascote .oculos {
  opacity: 0;
  transform: translateY(-5px) scale(.7);
  transform-origin: 22px 21px;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.mascote .oculos .lente { stroke: #fff; stroke-width: 1.5; }
.mascote .oculos .ponte, .mascote .oculos .haste { stroke: #fff; stroke-width: 1.4; }

/* As lentes têm um brilho de vidro: um véu claríssimo por dentro do aro.
   Sem ele o óculos lê como duas argolas, e não como lente. */
.mascote .oculos .lente { fill: #fff; fill-opacity: .16; }

/*
 * O óculos desce do alto, como quem baixa do topo da cabeça.
 *
 * É o gesto de quem vai ler de verdade, e ele dura três décimos: rápido o
 * bastante para acompanhar a primeira letra digitada, devagar o bastante
 * para a pessoa ver acontecer.
 */
.mascote[data-lendo="1"] .oculos { opacity: 1; transform: translateY(0) scale(1); }

/*
 * A varredura da leitura.
 *
 * Vai devagar da esquerda para a direita e VOLTA depressa — é assim que
 * um olho lê, e é a volta rápida que faz o desenho ser lido como leitura
 * em vez de vaivém. Uma linha e meia por segundo é o compasso de quem lê
 * com atenção, sem parecer que está procurando alguma coisa.
 */
.mascote[data-lendo="1"] .olhos {
  animation: mascote-le 1.6s cubic-bezier(.6, 0, .8, .2) infinite;
  /* O olhar que segue o ponteiro sai da frente: os dois mexem os olhos, e
     o último a valer ganharia. */
  transform: none;
  transition: none;
}

@keyframes mascote-le {
  0% { transform: translateX(-2.3px); }
  /* A linha inteira, no compasso de quem lê com atenção. */
  78% { transform: translateX(2.3px); }
  /* E a volta ao começo da linha seguinte: rápida, quase um salto. */
  92%, 100% { transform: translateX(-2.3px); }
}

/* De óculos, a boca fica reta: concentrado, e não sorrindo à toa. */
.mascote[data-lendo="1"] .boca {
  d: path("M18.6 27.8h6.8");
  transition: d .3s ease;
}

/*
 * Quem pediu menos animação recebe o óculos, e não a varredura.
 *
 * O óculos não é enfeite: é o mesmo tipo de coisa que o fone — diz o que
 * está acontecendo agora. Quem não quer movimento continua podendo ver
 * que ele está lendo.
 */
@media (prefers-reduced-motion: reduce) {
  .mascote .oculos { transition: none; }
  .mascote[data-lendo="1"] .olhos { animation: none !important; }
}

/* ------------------------------------------------- ouvindo, de fone */

.mascote .fone { opacity: 0; transform: scale(.75); transform-origin: 22px 23px; }
.mascote .fone .arco { stroke: var(--tinta); stroke-width: 2.6; }
.mascote .fone .cupula { fill: var(--tinta); }

.mascote .ondas {
  position: absolute; right: -11px; top: 8px; opacity: 0;
  overflow: visible; pointer-events: none;
}
.mascote .ondas path {
  fill: none; stroke: var(--marca); stroke-width: 2; stroke-linecap: round;
}

/*
 * O fone aparece na hora, sem entrada animada.
 *
 * Ele não é enfeite: é o aviso de que o aparelho começou a gravar, e a
 * dúvida que ele existe para tirar é "já começou?". Um indicador que
 * demora dois décimos chega depois da primeira palavra.
 *
 * Além disso: animação de entrada só termina se a tela estiver
 * desenhando. Numa aba em segundo plano ela fica parada no primeiro
 * quadro — que aqui era opacity zero — e o fone simplesmente não
 * aparecia. Quem volta para a aba precisa ver o estado, e não o começo de
 * uma animação que ninguém assistiu.
 *
 * As três arcadas saem uma atrás da outra, com o mesmo atraso entre elas:
 * é o desenho de som se afastando. Saírem juntas viraria pisca-pisca, que
 * lê como alerta e não como escuta.
 */
.mascote[data-estado="ouvindo"] .fone { opacity: 1; transform: scale(1); }
.mascote[data-estado="ouvindo"] .ondas { opacity: 1; }
.mascote[data-estado="ouvindo"] .ondas path { animation: mascote-onda 1.5s ease-out infinite; }
.mascote[data-estado="ouvindo"] .ondas path:nth-child(2) { animation-delay: .22s; }
.mascote[data-estado="ouvindo"] .ondas path:nth-child(3) { animation-delay: .44s; }

/* Olhos parados e corpo respirando mais rápido: atento, sem agitação. */
.mascote[data-estado="ouvindo"] .olhos { animation: none; }
.mascote[data-estado="ouvindo"] .cara { animation: mascote-respira 2.4s ease-in-out infinite; }

@keyframes mascote-onda {
  0% { opacity: 0; transform: translateX(-3px) scale(.7); }
  35% { opacity: .95; }
  100% { opacity: 0; transform: translateX(2px) scale(1.05); }
}

/* ------------------------------------------------------- pensando */

/* Os olhos correm de um lado para o outro, e a moeda inclina de leve.
   É o gesto de procurar, e não o de esperar. */
.mascote[data-estado="pensando"] .olhos { animation: mascote-procura 1.5s ease-in-out infinite; }
.mascote[data-estado="pensando"] .cara { animation: mascote-inclina 3s ease-in-out infinite; }

@keyframes mascote-procura {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2.2px); }
  70% { transform: translateX(2.2px); }
}
@keyframes mascote-inclina {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

/* -------------------------------------------------------- falando */

/* Um aceno curto e acabou. Comemoração longa cansa na terceira mensagem,
   e a pessoa manda dezenas por dia. */
.mascote[data-estado="falando"] .cara { animation: mascote-acena .5s ease-in-out 2; }

@keyframes mascote-acena {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-3px) scale(1.06); }
}

/*
 * Quem pediu menos animação recebe ele parado.
 *
 * Não é preferência de estilo: para parte das pessoas movimento repetido
 * no canto da tela dá enjoo de verdade, e o sistema já sabe disso — basta
 * perguntar. O fone continua aparecendo, porque ele não é animação: é
 * informação sobre o que está acontecendo agora.
 *
 * O REPERTÓRIO INTEIRO SAI, inclusive o do toque. A versão anterior
 * mantinha o giro por ter sido pedido, e isso valia quando o toque
 * produzia um giro de um segundo. Com "tonto" girando duas voltas, manter
 * o gesto para quem declarou enjoo seria entregar exatamente o que a
 * pessoa pediu para não receber.
 */
@media (prefers-reduced-motion: reduce) {
  .mascote .cara, .mascote .olhos, .mascote .olho,
  .mascote .boca, .mascote .ondas path { animation: none !important; }

  .mascote[data-olhando="1"] .olhos { transform: none; }
  .mascote[data-estado="ouvindo"] .ondas { opacity: .6; }
}