/* MONK: estilo das telas. Os tokens e as pecas (cartao, poco, vidro, tinta, av, marca...) estao em monk.css; aqui fica a base, a casca (barra de abas
   flutuante, cabecalhos, folhas) e cada tela. Regras que este arquivo cumpre e os testes medem:
   - texto de 11 a 22 px (22/17/15/13/12/11), alvo de toque de 44 pt no minimo, foco sempre visivel, contraste AA nos dois temas;
   - nada de rolagem para o lado: todo texto de dado quebra em qualquer ponto (overflow-wrap:anywhere);
   - estado = forma E palavra (a cor sozinha nunca diz o estado);
   - caixas nunca encostadas: todo grupo de caixas tem vao de pelo menos 8 px;
   - movimento so por transform e opacity; "reduzir movimento" troca por um esmaecer curto;
   - sem estilo dentro do HTML (CSP style-src 'self'): so classes (variavel CSS por JavaScript e permitida). */

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* ZERO ZOOM. touch-action nao herda: o que vale e a INTERSECAO do elemento ate a raiz, e o Safari ignora maximum-scale. Por isso TODO elemento leva
   pan-x pan-y (so rolar, nunca pinca nem toque duplo). Nenhuma regra usa manipulation, pinch-zoom ou auto (um unico "manipulation" muda o
   comportamento no iPhone). base/zoom.js cancela tambem os eventos de gesto. */
html,
body,
* {
  touch-action: pan-x pan-y;
}

/* a pagina inteira nao se arrasta alem das pontas (o "elastico" do Safari); as listas que rolam por dentro nao passam a rolagem adiante */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.4;
  /* svh = a altura com as barras do Safari na tela: o fim da pagina nao pula quando elas somem e voltam (vh e a altura com a barra recolhida) */
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* sem cara de site: botoes, abas, listas e cabecalhos nao selecionam e nao abrem o menu de toque longo; os textos de verdade (abaixo) continuam */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* o que se le e se copia de proposito continua selecionavel: o corpo das mensagens, o texto das perguntas, a saida de ferramentas e os campos */
input,
textarea,
.balao-texto,
.md,
.pergunta-titulo,
.pergunta-texto,
.feed-texto,
.texto-final,
.codigo-chave,
.md-codigo,
.codigo-inline {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

a {
  color: var(--ardosia);
}

img {
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
}

/* algarismos de largura igual onde ha hora, contagem ou numero que se compara; no texto corrido ficam os naturais */
time,
.tempo,
.mono,
.selo-novas,
.chip-conta,
.ragha-meta,
.recado-estado,
.sistema-pilula,
.linha-sub,
.texto-suave,
.texto-quebra,
.secao-cab > .texto-suave,
.numeros {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: inherit;
  font-size: 13px;
}

.texto-suave {
  color: var(--ink3);
  font-size: 13px;
}

.texto-quebra {
  overflow-wrap: anywhere;
  min-width: 0;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.pular {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 80;
  min-height: 44px;
  padding: 0 16px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--foco);
  border-radius: 22px;
}

.pular:focus {
  top: 8px;
}

/* ---------- casca ---------- */
#conteudo {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 var(--area-nav);
  position: relative;
  /* a nevoa (.fumo) passa da borda da tela de proposito: clip corta o que sai SEM criar uma area de rolagem (o sticky do cabecalho continua valendo) e sem
     deixar o navegador do celular "abrir" a janela para caber o que passou (isso alargava as folhas) */
  overflow-x: clip;
}

#conteudo .col-meio {
  min-width: 0;
}

/* a conversa tem o compositor embaixo: a folga da barra de abas sai, a area fixa do compositor cuida do fim */
body[data-rota="p"] #conteudo,
body[data-rota="entrar"] #conteudo {
  padding-bottom: 0;
}

/* uma tela = a coluna com margem de 20 (as listas da referencia); a conversa usa 16 */
.tela {
  position: relative;
  padding: 0 var(--margem-larga);
  display: block;
  min-width: 0;
}

.tela-topo {
  position: relative;
  padding: calc(env(safe-area-inset-top) + 12px) 0 0;
}

.titulo-tela {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.secao {
  margin-top: var(--e5);
}

.secao-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.secao-cab {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin-top: var(--e5);
}

.secao-cab > .secao-titulo {
  flex-grow: 1;
}

.secao-cab > .texto-suave {
  flex-shrink: 0;
}


/* uma linha no lugar de uma secao vazia ("Parado: nenhum") */
.secao-vazia {
  margin-top: var(--e5);
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 13px;
  color: var(--ink3);
}

.secao-vazia strong {
  color: var(--ink);
  font-size: 15px;
}

/* ---------- botoes ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alvo);
  padding: 0 18px;
  background: var(--well);
  color: var(--ink);
  border: none;
  border-radius: 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao-principal {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--btn-sh);
  font-weight: 700;
}

.botao-claro {
  background: var(--well);
  color: var(--ink);
}

.botao-contorno {
  background: transparent;
  border: 1.5px solid var(--line2);
}

.botao-perigo {
  background: transparent;
  color: var(--erro);
  border: 1.5px solid var(--line2);
  font-weight: 700;
}

.botao:disabled,
.botao-redondo:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: default;
}

.botao-grande {
  min-height: 54px;
  border-radius: 27px;
  font-size: 16px;
  font-weight: 700;
}

.botao-redondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo);
  height: var(--alvo);
  flex: 0 0 auto;
  padding: 0;
  background: var(--well);
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
}

.botao-claro.botao-redondo {
  background: var(--well);
}

/* o botao de enviar do compositor e o "+" da barra: tinta cheia */
.botao-tinta {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--btn-sh);
}

/* ligacao em texto: ardosia (a cor da prova e do que se abre) */
.link-texto {
  color: var(--ardosia);
  text-decoration: underline dotted;
}

/* ---------- chips de filtro ---------- */
.chips {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px var(--margem-larga);
  margin: 0 calc(-1 * var(--margem-larga));
  overscroll-behavior-x: contain;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: var(--alvo);
  padding: 0 14px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: 22px;
  box-shadow: var(--edge), var(--sh-md);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.chip-filtro[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--btn-sh);
}

.chip-filtro .chip-conta {
  opacity: 0.55;
  font-weight: 700;
}

/* ---------- estado: bolinha + palavra ---------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}

.ponto {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink3);
}

.ponto-trabalhando {
  background: var(--salvia);
  box-shadow: 0 0 0 4px var(--salvia-soft);
}

.ponto-esperando {
  background: conic-gradient(var(--ambar) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 2px var(--ambar);
}

.ponto-pronta {
  background: var(--ardosia);
}

.ponto-noar {
  background: var(--salvia);
}


/* parada: aro vazio, para nao depender so da cor */
.ponto-parada {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink3);
}

.fluxo[data-estado="trabalhando"] .ponto {
  background: var(--salvia);
  box-shadow: 0 0 0 4px var(--salvia-soft);
}

.fluxo[data-estado="esperando"] .ponto {
  background: conic-gradient(var(--ambar) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 2px var(--ambar);
}

.fluxo[data-estado="parada"] .ponto {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink3);
}

.fluxo {
  margin: 0;
  white-space: nowrap;
}

/* pontinhos animados de "trabalhando agora": so opacity, e so com sinal fresco */
.pontinhos {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.pontinhos i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: pontinho 1.2s ease-in-out infinite;
}

.pontinhos i:nth-child(2) {
  animation-delay: 0.2s;
}

.pontinhos i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pontinho {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

.selo-novas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
}

.sino-cortado {
  display: inline-flex;
  color: var(--ink3);
}

/* ---------- mensagens da tela: avisos, vazio, carregando ---------- */
.aviso {
  margin: var(--e3) 0;
  padding: 12px 16px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--edge), var(--sh-md);
  font-size: 13px;
  color: var(--ink2);
  display: grid;
  gap: var(--e2);
  justify-items: start;
}

.aviso-erro {
  color: var(--erro);
  font-weight: 600;
}

.aviso-info {
  color: var(--ink2);
}

.aviso-carregando {
  color: var(--ink3);
  box-shadow: none;
  background: transparent;
  padding-left: 0;
}

.vazio {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  padding: var(--e6) var(--e4);
  text-align: center;
}

.vazio-titulo {
  font-size: 15px;
  font-weight: 700;
}

.vazio-leve {
  padding: 4px 0;
}

/* ---------- listas: um cartao so com as linhas separadas por um fio ---------- */
.lista-cartao {
  margin-top: var(--e3);
  overflow: hidden;
}

.lista-cartao > * + * {
  border-top: 1px solid var(--line);
}

.lista-cartao > .secao-vazia {
  border: 0;
}

.linha-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 12px var(--e4);
  min-height: 56px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.linha-corpo {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linha-titulo {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.linha-sub {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.35;
}

.linha-uma {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha-meta {
  font-size: 12px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.linha-seta {
  display: inline-flex;
  color: var(--ink3);
  flex-shrink: 0;
}

/* feito, recados, atividade: o tipo e a hora numa linha, o texto embaixo */
.feito-dia {
  margin: var(--e5) 0 0;
  font-size: 15px;
  font-weight: 700;
}

.feito-dia:first-child {
  margin-top: 0;
}

.feito-lista {
  display: block;
}

.feito-lista > .feito-dia + .lista-cartao,
.feito-lista > .feito-dia + .feito-linha {
  margin-top: var(--e3);
}

/* ---------- barra de abas flutuante: a capsula (Inicio, Ragha, Atividade, Agentes, Buscar) e o circulo "+" de 56, separados ---------- */
/* PARADA: nunca some ao rolar. Vidro so aqui (controle flutuante); bottom = area segura + 12. */
.barra-app {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 30;
  /* centrada SEM transform (um transform faria o esmaecido de baixo, que e fixo, seguir a barra em vez da tela) */
  max-width: 728px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* o esmaecido atras da barra: o conteudo some por baixo dela sem corte seco */
.barra-app::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(var(--nav-altura) + env(safe-area-inset-bottom) + 44px);
  pointer-events: none;
  background: linear-gradient(180deg, var(--fade-0) 0%, var(--fade-1) 62%);
}

.capsula {
  flex-grow: 1;
  min-width: 0;
  height: var(--nav-altura);
  padding: 6px;
  border-radius: 31px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.capsula a {
  position: relative;
  min-width: 0;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink3);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
}

.capsula a[aria-current="page"] {
  background: var(--well);
  color: var(--ink);
  font-weight: 700;
}

.barra-rotulo {
  line-height: 1.1;
}

.barra-centro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-circulo);
  height: var(--nav-circulo);
  flex-shrink: 0;
  border-radius: 50%;
  text-decoration: none;
}

/* na conversa (celular) a barra sai e a capsula encolhe para um circulo ao lado do compositor */
@media (max-width: 1023px) {
  body[data-rota="p"] .barra-app {
    display: none;
  }
}

.circulo-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-circulo);
  height: var(--nav-circulo);
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- cabecalho de tela com voltar ---------- */
.cab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  min-height: 44px;
}

.cab-lado {
  display: flex;
  flex-shrink: 0;
}

.cab-centro {
  flex-grow: 1;
  min-width: 0;
}

.cab-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cab-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink3);
  display: flex;
  gap: 4px;
  align-items: center;
}

/* titulo no meio (a conversa): 15 em negrito e a linha de baixo em 12 */
.cab-meio .cab-centro {
  text-align: center;
}

.cab-meio .cab-titulo {
  font-size: 15px;
  letter-spacing: 0;
}

.cab-meio .cab-sub {
  justify-content: center;
}


/* o cabecalho da conversa fica no alto ao rolar, com um veu atras do texto (o vidro fica so nos botoes redondos) */
.cab-fixo {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--fundo-topo);
}

.botao-vidro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo);
  height: var(--alvo);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}

/* ---------- folhas (sheets): sobem com mola, fecham arrastando para baixo; o fundo escurece ---------- */
.janela {
  width: min(92vw, 40rem);
  max-height: 88dvh;
  padding: var(--e4) var(--margem-larga) var(--e5);
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 34px;
  box-shadow: var(--edge), var(--hi), var(--sh-lg);
  overflow: auto;
  overscroll-behavior: contain;
}

.janela::backdrop {
  background: var(--pano);
}

.folha-alca {
  display: none;
  justify-self: center;
  align-self: center;
  width: 36px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 3px;
  background: var(--line2);
}

@media (max-width: 700px) {
  .folha {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 34px 34px 0 0;
    padding-bottom: max(var(--e5), env(safe-area-inset-bottom));
    animation: monk-folha 0.32s var(--mola);
  }

  .folha-alta {
    height: calc(100dvh - 56px);
    max-height: none;
  }

  .folha-alca {
    display: block;
  }
}

@keyframes monk-folha {
  from {
    transform: translateY(48px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* o fundo escurecido aparece com um esmaecer (so opacity) */
.folha[open]::backdrop {
  animation: monk-pano 0.24s ease-out;
}

@keyframes monk-pano {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.folha-saindo {
  transition: transform 0.22s ease-in, opacity 0.22s ease-in;
  transform: translateY(100%);
  opacity: 0.6;
}

.folha-cab {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.folha-cab > .secao-titulo,
.folha-cab > h2 {
  flex-grow: 1;
  font-size: 17px;
  font-weight: 700;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: flex-end;
  margin-top: var(--e3);
}

.acoes-janela {
  margin-top: var(--e4);
}

.acoes-janela > .botao {
  flex: 1 1 0;
}

.janela-chamada {
  margin: var(--e2) 0 var(--e3);
  font-size: 13px;
  color: var(--ink3);
}

.texto-final {
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--well);
  border-radius: var(--poco-raio);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 40dvh;
  overflow: auto;
}

/* ---------- puxar para atualizar (base/puxar.js): uma bolinha FIXA por cima do topo; o dedo a traz por transform e opacity ---------- */
.puxar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 70;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  transform: translate3d(-50%, -120px, 0);
  opacity: 0;
  pointer-events: none;
}

.puxar:not([data-estado="parado"]) {
  will-change: transform, opacity;
}

.puxar.volta {
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

.puxar-bola {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  color: var(--ink2);
  background: var(--glass-solido);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--sh-md);
}

.puxar-bola .icone {
  transition: transform 0.18s ease-out;
}

.puxar[data-estado="solte"] .puxar-bola .icone {
  transform: rotate(180deg);
}

.puxar[data-estado="atualizando"] .puxar-bola .icone {
  display: none;
}

.puxar[data-estado="atualizando"] .puxar-bola::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid var(--line2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- faixas calmas no alto: Sem conexao, Reconectando e a pilula de versao nova ---------- */
.faixas {
  position: fixed;
  /* embaixo, logo acima da barra de abas: no alto cobria o titulo de todas as telas (revisao HIG 12/10) */
  bottom: calc(env(safe-area-inset-bottom) + var(--nav-altura) + 28px);
  left: 0;
  right: 0;
  z-index: 75;
  display: grid;
  gap: var(--e2);
  justify-items: center;
  padding: 0 var(--e4);
  pointer-events: none;
}

.faixa,
.pilula-versao {
  margin: 0;
  max-width: 100%;
  padding: 10px 18px;
  background: var(--glass-solido);
  color: var(--ink);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--sh-md);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.faixa-sem-conexao {
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
  box-shadow: inset 0 0 0 1px var(--ambar-soft), var(--sh-md);
}

.pilula-versao {
  min-height: var(--alvo);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--btn-sh);
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* ---------- chave liga/desliga (alvo 56 x 44; o desenho e o da referencia: 51 x 31) ---------- */
.interruptor {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: var(--alvo);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.interruptor::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 51px;
  height: 31px;
  background: var(--line2);
  border-radius: 16px;
}

.interruptor[aria-checked="true"]::before {
  background: var(--ink);
}

.interruptor-bola {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 27px;
  height: 27px;
  background: var(--paper-solid);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.interruptor[aria-checked="true"] .interruptor-bola {
  transform: translateX(20px);
  background: var(--on-ink);
}

.interruptor[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
}

/* ---------- formularios ---------- */
.formulario {
  display: grid;
  gap: var(--e4);
}

.linha-campo {
  display: grid;
  gap: var(--e2);
}

.linha-campo > label,
.rotulo-campo {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
}

.campo {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: var(--well);
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 16px; /* 16 evita o zoom do campo no iPhone */
  font-weight: 600;
}

.campo::placeholder {
  color: var(--ink3);
  opacity: 1;
}

textarea.campo {
  height: auto;
  padding: 12px 16px;
  line-height: 1.4;
  font-weight: 500;
  resize: none;
}

.caixa-marcar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alvo);
  font-size: 15px;
  font-weight: 600;
}

.caixa-marcar input {
  width: 24px;
  height: 24px;
  accent-color: var(--ink);
}

.resultado {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.resultado-ok {
  color: var(--salvia-tinta);
}

.resultado-erro {
  color: var(--erro);
}

.copia-oculta {
  position: fixed;
  left: -9999px;
  top: 0;
}

/* ---------- abertura (N00): o macaco em tela cheia; vem no index.html antes de qualquer JavaScript e vira a tela de entrar ---------- */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 100; /* acima da barra de abas (30) e do esmaecido dela */
  overflow: hidden;
  background: var(--fundo-1);
}

.abertura-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* no modo noite a imagem e invertida e o matiz girado em 180 graus: o mesmo filtro da referencia (so na abertura, uma imagem so) */
.escuro .abertura-img {
  filter: invert(1) hue-rotate(180deg);
}

.abertura-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(229, 227, 222, 0) 0%, rgba(229, 227, 222, 0.97) 60%, var(--fundo-2) 100%); /* termina na cor de base da pagina (--fundo-2): qualquer sobra embaixo some */
}

.escuro .abertura-fade {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 0.96) 60%, var(--fundo-2) 100%);
}

.abertura-corpo {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.abertura-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.marca-entra {
  display: inline-flex;
}

.abertura-nome {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--ink);
}

.abertura-texto,
.abertura-frase {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2);
}

.abertura-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.abertura-entrar,
.abertura-botao {
  width: 100%;
  height: 56px;
  border-radius: 28px;
}

.abertura-nota {
  font-size: 12px;
  color: var(--ink3);
  text-align: center;
}

/* a tela do index.html ja passou pela entrada: quando vira a abertura de verdade, nao repete as animacoes */
.abertura-quieta .entra-img,
.abertura-quieta .entra-1,
.abertura-quieta .entra-2,
.abertura-quieta .entra-3,
.abertura-quieta .entra-anel .marca-anel {
  animation: none;
}

.entrar-abertura {
  display: block;
}

/* ---------- entrar (N01) ---------- */
.entrar {
  position: relative;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + 49px) var(--margem-larga) var(--e5);
}

.entrar.entrar-abertura {
  padding: 0;
  min-height: 0;
}

.entrar-fumo {
  width: 380px;
  height: 380px;
  left: 5px;
  top: -60px;
}

.entrar-cabeca {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entrar-cabeca .marca-grande {
  align-items: center;
  gap: 18px;
  font-size: 34px;
}

.entrar-subtitulo {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink2);
}

.entrar-cartao {
  position: relative;
  margin-top: 30px;
  padding: var(--margem-larga);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.entrar-texto {
  font-size: 15px;
  line-height: 1.5;
}

.entrar-aviso {
  position: relative;
}

.entrar-nota {
  position: relative;
  margin: 18px 24px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink3);
  text-align: center;
}

/* o campo dos 6 numeros: seis caixas de desenho e UM campo transparente por cima */
.digitos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e2);
}

.digito {
  height: 54px;
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  background: var(--paper-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.digito-ativo {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--halo);
}

.codigo-entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0.01;
}

.entrar-manter {
  justify-content: space-between;
}

/* a caixa "Manter conectado" desenhada como a chave do iPhone (51 x 31) */
.caixa-marcar .chave-manter,
.chave-manter {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 16px;
  background: var(--line2);
  cursor: pointer;
}

.folha:focus {
  outline: none;
}

.chave-manter::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--paper-solid);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.chave-manter:checked {
  background: var(--ink);
}

.chave-manter:checked::after {
  transform: translateX(20px);
  background: var(--on-ink);
}

/* a tela de sem conexao (offline.html) */
.pagina-offline {
  display: grid;
  place-items: center;
  min-height: 100svh;
}

.offline {
  max-width: 420px;
  padding: var(--e5);
  display: grid;
  gap: var(--e4);
  text-align: center;
  justify-items: center;
}

/* =====================================================================================================================
   INICIO (N02, layout C)
   ===================================================================================================================== */
.inicio-fumo-1 {
  width: 360px;
  height: 360px;
  left: -170px;
  top: -150px;
}

.inicio-fumo-2 {
  width: 420px;
  height: 420px;
  right: -220px;
  top: 360px;
}

.inicio-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.inicio-topo .marca {
  flex-grow: 1;
}

.inicio-eu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo);
  min-height: var(--alvo);
  text-decoration: none;
}

.inicio-saudacao {
  padding-top: 14px;
}

.inicio-ola {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.inicio-resumo {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink2);
}

.inicio-esperam {
  font-weight: 700;
}

.pilula-foco {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  margin-top: var(--e2);
  padding: 0 14px;
  border-radius: 22px;
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.inicio .chips {
  margin-top: var(--e4);
}

.inicio-corpo {
  margin-top: 4px;
}

.inicio-reserva {
  min-height: 120px;
}

.inicio-fila {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.fila-lista {
  display: grid;
  gap: var(--e3);
}

.fila-lista:empty {
  display: none;
}

.fila-tudo {
  justify-self: start;
}

.atalho-conta {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

.atalho-conta:empty {
  display: none;
}

.cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e2);
}

.cor-opcao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  padding: 0 var(--e4);
  color: var(--ink);
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.cor-opcao.cor-marcada {
  box-shadow: inset 0 0 0 2px var(--ink), var(--sh);
}

.cor-bola {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--cor, var(--ardosia));
  border-radius: 50%;
}

.cor-nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cor-marca {
  margin-left: auto;
  display: inline-flex;
}

.ajustes-nota {
  margin: var(--e2) 4px 0;
  font-size: 13px;
}

.detalhes-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
}

.detalhes-ficha {
  margin: 0;
  font-size: 13px;
}

.detalhes-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.av-abre-agora {
  cursor: pointer;
}

.av-abre-agora::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.inicio-meta {
  margin: var(--e2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: 13px;
}

.entrar-usuario summary {
  min-height: var(--alvo);
  display: flex;
  align-items: center;
  color: var(--ink2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.entrar-usuario .linha-campo {
  margin-top: var(--e2);
}

/* quem faz, modelo e esforco: a linha que abre a folha, a escolha na confirmacao e no cartao da tarefa */
.despacho-caixa {
  margin-top: var(--e3);
}

.despacho-caixa[hidden] {
  display: none;
}

.despacho-linha {
  width: 100%;
  min-height: var(--alvo);
  padding: 10px var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.despacho-textos {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.despacho-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
}

.despacho-valor {
  font-size: 15px;
  font-weight: 700;
}

.despacho-grupo {
  margin-bottom: var(--e4);
}

.despacho-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e2);
}

.despacho-confirma {
  margin: var(--e3) 0 0;
  font-size: 14px;
}

.despacho-do-cartao {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink3);
}

/* o botao "Modelo e esforco" de cada agente e a folha dele */
.modelo-botao {
  min-height: var(--alvo);
  padding: 8px var(--e4);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: var(--well);
  color: var(--ink);
  border: 0;
  border-radius: 22px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.modelo-botao-textos {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.modelo-botao-rotulo {
  font-weight: 700;
}

.modelo-botao-valor {
  color: var(--ink3);
}

.modelo-botao-pendente {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
  font-size: 11px;
  font-weight: 700;
}

.canal-modelo {
  margin: var(--e3) var(--margem) 0;
}

.modelo-botao-no,
.modelo-botao-equipe {
  margin: var(--e2) 0 var(--e2) var(--e4);
}

.modelo-botao-cartao {
  margin-top: var(--e2);
}

.modelo-valendo {
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modelo-pendente {
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ambar-soft);
}

.modelo-trocar {
  margin-top: var(--e4);
}

.modelo-resultado {
  margin-top: var(--e3);
}

.secao-mais {
  margin-top: var(--e3);
  width: 100%;
}

.secao-mais[hidden] {
  display: none;
}

.fila-adiados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.fila-adiados[hidden] {
  display: none;
}

.fila-adiados p {
  margin: 0;
}

.inicio-fila .secao-vazia,
.inicio-fila .fila-vazia {
  margin-top: 0;
}

.inicio-ragha {
  margin-top: var(--e3);
}

.ragha-linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 14px var(--e4);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.ragha-nome {
  font-size: 15px;
  font-weight: 700;
}

.ragha-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
}

.inicio-secao {
  display: block;
}

.inicio-atalhos,
.inicio-fixados,
.inicio-feito {
  margin-top: var(--e5);
}

.inicio-atalhos .atalhos-chips {
  margin-top: var(--e3);
}

.chip-filtro svg {
  flex-shrink: 0;
}

a.chip-filtro {
  text-decoration: none;
}

.secao-cab .link-texto {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  margin: -12px 0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

/* uma tarefa: o avatar, o nome, a linha viva e, na ponta, o selo ou a hora */
.linha-projeto {
  padding-top: 12px;
  padding-bottom: 12px;
}

.linha-1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.linha-viva {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink3);
}

.linha-viva strong {
  font-weight: 600;
}

.preview-trabalhando {
  color: var(--ink2);
}

/* o texto encurta com reticencias e os pontinhos de "trabalhando" ficam SEMPRE a vista ao lado (antes, texto comprido empurrava os pontos para fora da caixa) */
.linha-viva.preview-trabalhando {
  display: flex;
  align-items: center;
}

.preview-trabalhando .preview-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-trabalhando .pontinhos {
  flex-shrink: 0;
}

.linha-uma {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixado {
  display: flex;
  align-items: center;
}

.fixado-principal {
  flex-grow: 1;
  min-width: 0;
}

.fixado-tirar {
  margin-right: var(--e3);
}

.fixados-lista .estado {
  font-size: 13px;
  color: var(--ink3);
  font-weight: 500;
}

/* feito: o tipo (em negrito), a tarefa e a hora numa linha; o texto embaixo */
.feito-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  font-size: 12px;
}

.feito-tipo {
  font-weight: 700;
}

.feito-projeto {
  color: var(--ink3);
  font-weight: 600;
}

.feito-texto {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.feito-fotos {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.miniatura-pequena {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--well);
}

/* =====================================================================================================================
   O CARTAO DE UMA PERGUNTA e a DECISAO
   ===================================================================================================================== */
.pergunta-cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  min-width: 0;
}

.pergunta-cartao.saindo {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.pergunta-meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.pergunta-meta .espera {
  width: 10px;
  height: 10px;
}

/* o nome da tarefa e a hora ficam na ponta; o toque tem 44 pt (a margem negativa nao empurra o cartao) */
.pergunta-tarefa {
  margin-left: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  margin-top: -10px;
  margin-bottom: -10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
  text-decoration: none;
}

.pergunta-hora {
  font-size: 12px;
  color: var(--ink3);
  flex-shrink: 0;
}

.pergunta-titulo {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  /* no maximo duas linhas: o cartao fica compacto */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

button.pergunta-titulo {
  display: -webkit-box;
  width: 100%;
  min-height: var(--alvo);
  padding: 9px 0;
  margin: -9px 0;
  cursor: pointer;
}

.pergunta-texto {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.precisa-parado {
  font-size: 12px;
  color: var(--ink3);
}

.pergunta-encerrada {
  margin: 0;
}

.decisao-acoes {
  display: flex;
  gap: var(--e2);
  margin-top: 4px;
}

.decisao-aprovar,
.decisao-recusar {
  flex: 1 1 0;
  min-width: 0;
}

/* a mesma espessura de borda do Recusar (que e de contorno): sem isso os dois botoes divergiam em 2 px de largura */
.decisao-aprovar {
  border: 1.5px solid transparent;
}

.decisao-acoes-grande {
  flex-wrap: wrap;
  margin-top: 0;
}

/* Aprovar e Recusar sao o par da decisao: do MESMO tamanho (regra 8 do layout), lado a lado; Adiar e Editar ficam na linha de baixo */
.decisao-acoes-grande .decisao-aprovar,
.decisao-acoes-grande .decisao-recusar {
  flex: 1 1 calc(50% - 4px);
}

.decisao-grande {
  flex: 1 1 0;
  min-height: 46px;
}

.respostas-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* "Editar o pedido": o campo de texto que abre no proprio cartao */
.pergunta-escrever {
  display: grid;
  gap: var(--e3);
  margin-top: 4px;
}

.pergunta-campo {
  width: 100%;
  padding: 12px 16px;
  background: var(--well);
  color: var(--ink);
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}

.adiar-opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2);
  margin: var(--e4) 0;
}

.folha-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.folha-corpo {
  display: block;
  min-width: 0;
}

.folha-alta {
  display: flex;
  flex-direction: column;
}

.folha-alta .folha-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.folha-cab-tres {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.folha-cancelar {
  justify-self: start;
  min-height: var(--alvo);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink2);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.folha-titulo-meio {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.folha-espaco {
  flex-grow: 1;
}

.folha-fechar {
  width: var(--alvo);
  height: var(--alvo);
}

.decisao-titulo {
  margin: var(--e2) 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.decisao-meta {
  margin: var(--e2) 0 0;
  font-size: 13px;
  color: var(--ink3);
}

.decisao-tarefa {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  margin: -12px 0;
  font-weight: 600;
}

.decisao-texto {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink2);
}

.decisao-rodape {
  margin-top: auto;
  padding-top: var(--e4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decisao-nota {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink3);
  text-align: center;
}

.folha-recado .folha-cab,
.folha-detalhes .folha-cab {
  margin-bottom: var(--e2);
}

/* =====================================================================================================================
   ATIVIDADE (N08)
   ===================================================================================================================== */
.atividade-fumo,
.agentes-fumo,
.buscar-fumo {
  width: 400px;
  height: 400px;
  right: -210px;
  top: -140px;
}

.agentes-fumo,
.buscar-fumo {
  right: auto;
  left: -200px;
  top: -120px;
}

.tela-topo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tela-topo-linha .titulo-tela {
  flex-grow: 1;
}

.atividade-lido {
  min-height: var(--alvo);
  padding: 0 14px;
  border-radius: 22px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
}

.atividade .chips,
.buscar .chips {
  margin-top: var(--e4);
}

.atividade-secao {
  margin: var(--e5) 0 0;
  font-size: 15px;
  font-weight: 700;
}

.atividade-secao-velha {
  color: var(--ink3);
}

.atividade-lista .lista-cartao {
  margin-top: var(--e3);
}

.atividade-lista > .atividade-secao:first-child {
  margin-top: var(--e5);
}

.precisa-antigas-botao {
  margin-top: var(--e4);
  width: 100%;
}

.precisa-antigas {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e3);
}

.precisa-antigas[hidden],
.precisa-antigas-botao[hidden] {
  display: none;
}

.atividade-linha {
  align-items: flex-start;
  padding: 14px var(--e4);
}

.atividade-botao {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.atividade-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.atividade-meta .espera {
  width: 10px;
  height: 10px;
}

.atividade-tipo {
  font-weight: 700;
}

.atividade-tipo-velho {
  color: var(--ink2);
}

.atividade-titulo {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.atividade-titulo-velho {
  font-weight: 500;
  color: var(--ink2);
}

/* =====================================================================================================================
   AGENTES (N09)
   ===================================================================================================================== */
.conta-cartao {
  margin-top: var(--e4);
  padding: 18px;
}

.conta-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.conta-uso {
  margin-top: var(--e4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.conta-medido {
  grid-column: 1 / -1;
  margin: 0;
}

.uso {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uso-linha {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.uso-valor {
  font-size: 22px;
  font-weight: 700;
}

.barra {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.barra-cheia {
  display: block;
  height: 6px;
  width: var(--pct, 0%);
  border-radius: 3px;
  background: var(--ink);
}

.barra-alta .barra-cheia {
  background: var(--ambar);
}

.agentes-equipe {
  margin-top: 0;
}

.equipe-nome {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.equipe-linha {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--ink);
}

button.equipe-linha {
  cursor: pointer;
}

.equipe-ocupado {
  color: var(--ink2);
}

/* =====================================================================================================================
   NO AR (N10)
   ===================================================================================================================== */
.noar-fumo {
  width: 420px;
  height: 420px;
  right: -220px;
  top: -100px;
}

.noar-destaque {
  margin-top: var(--e4);
  padding: 18px;
}

.noar-destaque-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
}

.noar-destaque-corpo {
  margin-top: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.noar-quadro {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.noar-destaque .noar-quadro {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.noar-titulo {
  font-size: 16px;
  font-weight: 700;
}

.noar-abrir {
  margin-top: 14px;
  width: 100%;
  height: 46px;
  border-radius: 23px;
}

/* =====================================================================================================================
   BUSCAR (N11)
   ===================================================================================================================== */
.buscar {
  padding-bottom: 80px;
}

/* o campo de vidro flutua logo acima da barra de abas e sobe com o teclado (so transform) */
.buscar-campo {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 12px + var(--nav-altura) + 12px);
  z-index: 25;
  height: 54px;
  padding: 0 5px 0 18px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink3);
  max-width: 728px;
  margin: 0 auto;
  transform: translate3d(0, calc(-1 * var(--teclado, 0px)), 0);
}

/* com o teclado da busca aberto o campo desce para o fundo e a barra de abas some (ela ficaria atras do teclado) */
body:has(.campo-busca:focus) .buscar-campo {
  bottom: 12px;
}

body:has(.campo-busca:focus) .barra-app {
  visibility: hidden;
}

.campo-busca {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.campo-busca::placeholder {
  color: var(--ink3);
  opacity: 1;
}

.busca-texto {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.achado {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.buscar-resultado .secao-cab:first-child {
  margin-top: var(--e5);
}

/* =====================================================================================================================
   AJUSTES (N12)
   ===================================================================================================================== */
.ajustes-fumo {
  width: 420px;
  height: 420px;
  right: -230px;
  top: 200px;
}

.ajustes-perfil {
  margin-top: var(--e4);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ajustes-nome {
  font-size: 17px;
  font-weight: 700;
}

.ajustes-fluxo {
  font-size: 12px;
}

.ajustes-titulo {
  margin: var(--e5) 0 var(--e3);
}

.segmentos {
  padding: 4px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmento {
  height: var(--alvo);
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.segmento.tinta {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
}

.ajustes .lista-cartao {
  margin-top: 0;
}

.ajustes-linha {
  min-height: 56px;
}

.ajustes-sair {
  margin-top: var(--e5);
  width: 100%;
}

/* =====================================================================================================================
   A CONVERSA (N04 e N06)
   ===================================================================================================================== */
.projeto-tela {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a coluna so cresce ate a tela: a largura de um filho (o campo de recado, um bloco de codigo) nao alarga a conversa */
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.cab-ragha {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) var(--e4) 6px;
}

.ragha-titulo {
  margin-top: var(--e2);
  font-size: 15px;
  letter-spacing: 0;
}

.canal-agora {
  margin: 4px var(--margem) 0;
  padding: var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.canal-avatar {
  display: inline-flex;
  flex-shrink: 0;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

span.canal-avatar {
  cursor: default;
}

.canal-nome {
  font-size: 15px;
  font-weight: 700;
}

.canal-vivo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.canal-vivo .vivo {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}

.canal-vivo .linha-viva {
  color: var(--salvia-tinta);
}

.faixa-motivo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 var(--margem);
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
  font-size: 13px;
  font-weight: 600;
}

.fio-caixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a coluna so cresce ate a tela: um bloco de codigo largo rola por dentro, nao alarga a conversa */
  gap: var(--e3);
  min-width: 0;
  padding: 0 var(--margem);
}

.busca-antiga {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  text-align: center;
}

.fio-novo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.item-fio {
  min-width: 0;
}

.fio-novo > * {
  min-width: 0;
  max-width: 100%;
}

.grupo {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.entra {
  animation: entrar 0.22s ease-out;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.alvo > .balao-corpo,
.alvo.grupo,
.alvo.sistema .sistema-pilula {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* a mensagem dos outros: retrato, nome em negrito, papel e hora, e o texto (sem balao); a do Carvalho: balao de tinta na direita */
.balao {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
}

.balao-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.balao-eu {
  justify-content: flex-end;
}

.balao-eu .balao-corpo {
  flex: 0 1 auto;
  max-width: min(82%, 640px);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 22px 22px 6px 22px;
  box-shadow: var(--btn-sh);
}

.balao-eu .balao-texto,
.balao-eu .balao-cab .tempo,
.balao-eu .ver-mais {
  color: var(--on-ink);
}

.balao-eu .balao-cab .autor,
.balao-eu .balao-cab .papel,
.balao-eu .balao-cab .para {
  display: none;
}

/* O botao de copiar dentro do balao escuro do Carvalho: o fundo comum dos botoes (--well, preto a 4,5%) some sobre o fundo escuro e o icone usava a cor da tinta,
   entao sobrava uma faixa escura vazia de 44 px embaixo do texto. Aqui o botao e claro sobre escuro e o balao nao tem faixa sem nada. */
.balao-eu .balao-acoes .botao-redondo {
  background: color-mix(in srgb, var(--on-ink) 16%, transparent);
  color: var(--on-ink);
}

.balao-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.balao-cab .autor {
  font-size: 15px;
  font-weight: 700;
}

.balao-cab .papel,
.balao-cab .para,
.balao-cab .tempo {
  color: var(--ink3);
  font-size: 12px;
}

.balao-texto {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink2);
}

/* a conversa com o Ragha: balao de cartao do lado dele (como o N06) */
.projeto-ragha .fio-caixa {
  padding-top: 4px;
}

.projeto-ragha .balao-outro > .av {
  display: none;
}

.projeto-ragha .balao-outro .balao-corpo {
  flex: 0 1 auto;
  max-width: min(84%, 640px);
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 22px 22px 22px 6px;
  box-shadow: var(--edge), var(--hi), var(--sh);
}

.projeto-ragha .balao-outro .balao-cab .autor,
.projeto-ragha .balao-outro .balao-cab .papel {
  display: none;
}

.projeto-ragha .balao-outro .balao-texto {
  color: var(--ink);
}

.ver-mais {
  justify-self: start;
  align-self: flex-start;
  min-height: var(--alvo);
  padding: 0 4px;
  background: transparent;
  color: var(--ardosia);
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.balao-acoes {
  display: flex;
  gap: 6px;
  margin: 0;
}

.balao-acoes .botao-redondo {
  width: var(--alvo);
  height: var(--alvo);
}

.balao-aviso {
  font-size: 12px;
  color: var(--ink3);
}

/* markdown dos baloes */
.md-p {
  margin: 0 0 8px;
}

.md-p:last-child {
  margin-bottom: 0;
}

.md-lista {
  margin: 0 0 8px;
  padding-left: 1.3em;
}

.md {
  min-width: 0;
  max-width: 100%;
}

.md-codigo {
  display: block;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 22em; /* bloco comprido rola POR DENTRO: nunca passa do balao */
  overflow: auto; /* so o bloco de codigo rola (para o lado e para baixo), nunca a pagina nem o balao */
  background: var(--well);
  color: var(--ink);
  border-radius: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}

/* codigo no meio da frase: fora do balao (previas, listas) e so um trecho de texto em Satoshi, sem caixa; no balao e uma caixinha que
   quebra dentro da propria largura (inline-block), para nunca virar um retangulo comprido por cima do vizinho */
.codigo-inline {
  font-family: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.balao-texto .codigo-inline {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  background: var(--well);
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 400;
  vertical-align: baseline;
}

.balao-eu .md-codigo,
.balao-eu .balao-texto .codigo-inline {
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-ink);
}

/* grupo de atividade: um cartao que abre e fecha */
.grupo {
  display: grid;
  gap: var(--e2);
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--edge), var(--sh-md);
}

.grupo-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--alvo);
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.grupo-texto {
  display: grid;
  min-width: 0;
  font-size: 14px;
}

.grupo-resumo {
  font-size: 13px;
  color: var(--ink3);
}

.grupo-seta {
  display: inline-flex;
  transition: transform 0.18s ease-out;
}

.grupo-aberto .grupo-seta {
  transform: rotate(180deg);
}

.grupo-pilulas,
.grupo-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pilula-destaque {
  display: inline-block;
  padding: 2px 10px;
  background: var(--well);
  color: var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.pilula-erro {
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
}

.grupo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.acao-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--alvo);
  padding: 4px 6px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.acao-icone {
  display: inline-flex;
  color: var(--ink3);
}

.grupo-resto {
  padding: 4px 6px;
}

.sistema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.sistema-pilula {
  padding: 4px 14px;
  background: var(--well);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}

.dia-separador {
  align-self: center;
  list-style: none;
  padding: 2px 14px;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.foto-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
}

.foto-corpo {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: min(82%, 380px);
}

.foto-botao {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}

.foto-botao.foto-grande {
  min-height: var(--alvo);
}

.miniatura-grande {
  max-width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
}

/* o campo de recado: parado embaixo; sobe a altura do teclado (base/teclado.js poe --teclado a cada quadro) por TRANSFORM (bottom e altura refaziam o layout) */
.compositor {
  position: sticky;
  bottom: 0;
  transform: translate3d(0, calc(-1 * var(--teclado, 0px)), 0);
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a coluna so cresce ate a tela: o campo de recado nunca passa da largura do celular (375 e 360) */
  gap: var(--e2);
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(180deg, var(--fade-0) 0%, var(--fade-1) 40%);
}

.compositor-linha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.compositor-pilula {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--nav-circulo);
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  padding: 6px 6px 6px 18px;
  border-radius: 28px;
}

.compositor-campo {
  flex: 1 1 auto;
  width: 100%; /* o campo de texto e "comprimivel" com largura em %: sem isto a largura de 20 colunas dele alargava a coluna inteira em 375 e 360 */
  min-width: 0;
  max-height: 140px;
  padding: 11px 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.compositor-campo::placeholder {
  color: var(--ink3);
  opacity: 1;
}

.compositor-pilula:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.pergunta-pendente {
  min-width: 0;
}

/* a pergunta na caixa de recado: um cartao compacto e SOLIDO (o vidro e so do campo) */
.pergunta-no-compositor {
  padding: 12px 14px;
  gap: var(--e2);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: var(--edge), var(--sh-md);
}

.pergunta-no-compositor .pergunta-titulo {
  font-size: 15px;
}

.pergunta-no-compositor .pergunta-texto {
  -webkit-line-clamp: 2;
}

.compositor.respondendo .compositor-pilula {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.nota-sem-recado {
  margin: 0 var(--margem) var(--e4);
}

.fim-do-fio {
  height: 4px;
}

/* ao rolar ate um item (irParaItem, foco), a area fixa de baixo (altura medida pelo app em --area-fixa) nao cobre o que chegou */
.fio-novo .item-fio,
.fio-novo .dia-separador {
  scroll-margin-bottom: calc(var(--area-fixa, 0px) + 16px);
}

.flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(var(--area-fixa, 90px) + 12px);
  z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
}

.recado-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
}

.balao-eu .recado-estado {
  color: var(--on-ink);
  opacity: 0.8;
}

.membro-vivo .linha-titulo {
  color: var(--ink);
}

.cab-detalhes {
  background: var(--glass);
}

/* =====================================================================================================================
   O QUE SOBROU DAS TELAS DE APOIO (Contas e maquina, Arvore, Ao vivo, conversa por fonte, Avisos, Editar inicio, Codigo do celular...), no desenho do
   Monk: cartoes SOLIDOS com sombra, 24 de raio, texto 15/13, alvo de 44.
   ===================================================================================================================== */
.pagina-antiga {
  min-width: 0;
}

.pagina-antiga .titulo-tela {
  display: none; /* o titulo ja esta no cabecalho */
}

.pagina-antiga .cartao,
.avisos-cartao,
.codigo-situacao,
.codigo-cadastro,
.diagnostico,
.passo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--e4);
  min-width: 0;
}

.cartao-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
  margin-top: var(--e3);
}

.grande {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.linha-etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.etiqueta-conta,
.etiqueta-tipo {
  height: auto;
  min-height: 24px;
  padding: 2px 9px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.lista-simples,
.lista-links,
.lista-agentes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e2);
}

.sub,
.timer {
  display: grid;
  gap: 2px;
}

.agora {
  font-weight: 500;
}

.detalhes summary {
  display: flex;
  align-items: center;
  min-height: var(--alvo);
  font-weight: 700;
  cursor: pointer;
}

.atualizado,
.resumo-tarefas {
  margin: var(--e2) 0;
}

/* uma ligacao para outra tela, em cartao */
.linha-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: var(--alvo);
  padding: var(--e3) 14px;
  background: var(--well);
  border-radius: var(--poco-raio);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.linha-atual {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.linha-link-titulo {
  font-weight: 700;
}

.linha-link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.linha-link-curta {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 4px;
}

/* conversa por fonte (a antiga, para o CEO por baixo, o agy, o Codex...) */
.conversa-cab {
  display: grid;
  gap: 10px;
  margin-bottom: var(--e4);
}

.voltar {
  padding-left: 0;
  justify-content: flex-start;
}

.migalhas ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
}

.migalhas li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--ink3);
}

.agentes {
  padding: 4px 14px;
}

.agente-linha {
  display: grid;
  gap: 4px;
}

.lista-agentes .nivel-1 {
  margin-left: 12px;
}

.lista-agentes .nivel-2 {
  margin-left: 24px;
}

.lista-agentes .nivel-3,
.lista-agentes .nivel-4 {
  margin-left: 36px;
}

.fio {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.item {
  min-width: 0;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: fit-content;
  max-width: min(100%, 44rem);
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--edge), var(--sh-md);
}

.msg-esq {
  align-self: flex-start;
}

.msg-dir {
  align-self: flex-end;
  background: var(--ink);
  color: var(--on-ink);
}

.msg-erro {
  box-shadow: inset 0 0 0 1.5px var(--erro), var(--sh-md);
}

.msg-dir .msg-tipo,
.msg-dir .texto-suave {
  color: var(--on-ink); /* na fala do Carvalho (fundo de tinta) o texto de apoio usa a cor que lê sobre a tinta, nos dois temas */
}

.msg-tipo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
}

.msg-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.msg-texto {
  white-space: pre-wrap;
}

.colapsado {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.completo {
  margin: 0;
  padding: 10px;
  max-height: 26rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--well);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fio .item-ferramenta {
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--line2);
  display: grid;
  gap: 4px;
}

.ferr-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.ferr-nome {
  font-weight: 700;
}

.ferr-resumo {
  color: var(--ink3);
  font-size: 13px;
}

.msg-corpo {
  min-width: 0;
}

.ferr-linha .msg-corpo {
  flex: 1 1 12rem;
}

.item-estado {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  color: var(--ink3);
  font-size: 13px;
  text-align: center;
}

.cartao-filho {
  display: grid;
  gap: 2px;
  min-height: var(--alvo);
  padding: 10px var(--e3);
  background: var(--well);
  border-radius: var(--poco-raio);
  color: var(--ink);
  text-decoration: none;
}

.cartao-filho-rotulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cartao-filho-abrir {
  color: var(--ardosia);
  font-weight: 700;
  font-size: 13px;
}

.fio-vazio {
  list-style: none;
}

.aviso-flutuante {
  margin: 0;
  padding: 6px 12px;
  background: var(--glass-solido);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: var(--sh-md);
  font-size: 13px;
  font-weight: 600;
}

.flutuante-grupo {
  display: grid;
  justify-items: end;
  gap: var(--e2);
}

/* arvore: quem criou quem */
.arvore,
.no-filhos {
  list-style: none;
  padding: 0;
}

.arvore {
  margin-top: 14px;
}

.no-filhos {
  margin-top: 10px;
  margin-left: 6px;
}

.no {
  padding-left: var(--e3);
  border-left: 2px solid var(--line2);
}

.no + .no {
  margin-top: 10px;
}

.no-provavel {
  border-left-style: dashed;
}

.arvore > .no {
  border-left: 0;
  padding-left: 0;
}

.no-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: var(--alvo);
  padding: 10px var(--e3);
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--edge), var(--sh-md);
  color: var(--ink);
  text-decoration: none;
}

.no-nome {
  font-weight: 700;
}

/* ao vivo */
.filtros {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e3);
}

.filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.feed {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e3);
}

.feed-item {
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--edge), var(--sh-md);
  min-width: 0;
}

.feed-link {
  display: grid;
  gap: 6px;
  min-height: var(--alvo);
  padding: 10px var(--e3);
  color: var(--ink);
  text-decoration: none;
}

.feed-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.feed-topo .tempo {
  color: var(--ink3);
}

/* o texto do Ao vivo (cortado em 3 linhas): palavra comprida quebra em qualquer ponto, sobra um respiro de 4 px a direita para a ponta do texto */
.feed-texto,
.preview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.feed-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  padding-right: 4px;
}

.feed-ferr {
  color: var(--ink3);
  font-size: 13px;
}

.item-erro .etiqueta-tipo {
  background: var(--ambar-soft);
  color: var(--ambar-tinta);
}

/* editar inicio e avisos */
.editar-lista {
  display: grid;
  gap: var(--e3);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
}

.editar-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: var(--e2) var(--e3) var(--e2) var(--e4);
  border-radius: var(--cartao-raio);
}

.editar-linha[data-visivel="0"] .editar-nome {
  color: var(--ink3);
}

.editar-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}

.editar-linha-simples {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editar-corpo,
.avisos-corpo {
  display: grid;
  gap: 18px;
  margin-bottom: var(--e5);
}

.avisos-cartao .filtros-chips {
  margin: 0;
}

.horas-silencio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
}

.campo-hora {
  font-size: 16px; /* 16 px ou mais: o iPhone aproxima campo menor */
}

.ajustes-link {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  padding: 0 var(--e4);
  color: var(--ink);
  text-decoration: none;
}

.mais-icone {
  display: inline-flex;
  color: var(--ink2);
}

.mais-texto {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* avisos no iPhone: diagnostico e passos */
.diagnostico {
  margin-bottom: var(--e4);
}

.diagnostico-texto {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.passos {
  display: grid;
  gap: var(--e3);
  margin: 0 0 var(--e4);
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--well);
  border-radius: 50%;
  font-weight: 800;
}

.passo-agora .passo-numero {
  background: var(--ink);
  color: var(--on-ink);
}

.passo-corpo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.passo-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.passo-icone {
  display: inline-flex;
  color: var(--ardosia);
}

.passo-situacao {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink3);
}

.passo-situacao-agora {
  color: var(--ink);
}

.passo-acoes {
  margin-top: var(--e2);
  justify-content: flex-start;
}

/* Codigo do celular (a tela do cofre proprio) */
.codigo-corpo {
  display: grid;
  gap: 18px;
  margin-bottom: var(--e5);
}

.codigo-situacao-titulo {
  margin: 0;
  font-size: 17px;
}

/* O QR e SEMPRE claro, nos dois temas: o leitor do celular nao le QR invertido (fundo escuro com traco claro). */
.codigo-qr {
  display: grid;
  place-items: center;
  width: min(100%, 17rem);
  margin: 0 auto;
  padding: 10px;
  background: #ffffff;
  border-radius: 20px;
}

.codigo-qr .qr {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* a chave para digitar na mao: grupos de 4, em Satoshi com algarismos de largura igual (nada de monoespaco) */
.codigo-chave {
  margin: 0;
  padding: var(--e3) 14px;
  background: var(--well);
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}

.campo-codigo {
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.codigo-eventos {
  display: grid;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.codigo-evento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: var(--e3) var(--e4);
  border-radius: 22px;
}

.codigo-evento-frase {
  min-width: 0;
  flex: 1 1 14rem;
}

/* fotos: duas colunas no celular, cada foto um cartao (caixa medivel) */
.fotos-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e3);
}

@media (min-width: 600px) {
  .fotos-grade {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

.foto-cartao {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding: var(--e2) var(--e2) 10px;
  background: var(--paper);
  border-radius: var(--cartao-raio);
  box-shadow: var(--edge), var(--hi), var(--sh);
}

.foto-cartao .foto-botao {
  aspect-ratio: 1;
  border-radius: 18px;
}

.miniatura-grade {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--well);
}

.foto-legenda {
  display: grid;
  font-size: 13px;
  padding: 0 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* o visualizador de foto em tela cheia */
.visualizador {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  background: rgba(8, 8, 8, 0.95);
  border: 0;
  border-radius: 0;
  color: #fff;
}

.visualizador[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
}

.visualizador-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.visualizador-fechar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
}

.visualizador-legenda {
  margin: 0;
  padding: 10px var(--e4) max(14px, env(safe-area-inset-bottom));
  text-align: center;
}

.miniatura {
  max-width: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: var(--well);
}


/* =====================================================================================================================
   RESPOSTA AO TOQUE, MOVIMENTO REDUZIDO, TRANSPARENCIA E CONTRASTE
   ===================================================================================================================== */
/* tudo que se aperta responde ao dedo na hora (transform e opacity, em ate 200 ms) */
.botao,
.botao-redondo,
.botao-vidro,
.chip-filtro,
.segmento,
.linha-item,
.barra-centro,
.capsula a,
.circulo-nav,
.cartao a,
.pergunta-titulo {
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}

.botao:active,
.botao-redondo:active,
.botao-vidro:active,
.chip-filtro:active,
.segmento:active,
.barra-centro:active,
.capsula a:active,
.circulo-nav:active {
  transform: scale(0.97);
}

a.linha-item:active,
button.linha-item:active {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .botao:active,
  .botao-redondo:active,
  .botao-vidro:active,
  .chip-filtro:active,
  .segmento:active,
  .barra-centro:active,
  .capsula a:active,
  .circulo-nav:active {
    transform: none;
    opacity: 0.6;
  }

  /* os pontinhos de "trabalhando" ficam parados */
  .pontinhos i {
    animation: none;
    opacity: 0.6;
  }

  .folha {
    animation: monk-esmaece 0.15s ease-out;
  }

  .folha-saindo {
    transform: none;
    opacity: 0;
  }

  .pergunta-cartao.saindo {
    transform: none;
  }

  .entra {
    animation: none;
  }

  .chave-manter::after,
  .interruptor-bola,
  .grupo-seta {
    transition: none;
  }
}

@keyframes monk-esmaece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* transparencia reduzida: o vidro vira superficie lisa, sem desfoque */
@media (prefers-reduced-transparency: reduce) {
  .vidro {
    background: var(--glass-solido);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* contraste aumentado: borda definida e texto mais forte */
@media (prefers-contrast: more) {
  :root {
    --ink3: var(--ink2);
    --line: rgba(17, 17, 17, 0.25);
    --glass-edge: rgba(17, 17, 17, 0.4);
  }

  :root.escuro {
    --line: rgba(255, 255, 255, 0.3);
    --glass-edge: rgba(255, 255, 255, 0.5);
  }

  .vidro {
    background: var(--glass-solido);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px var(--line2);
  }

  .cartao {
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line2);
  }
}

/* navegador sem vidro (sem backdrop-filter): fundo firme para o texto continuar legivel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro {
    background: var(--glass-solido);
  }
}

/* o app instalado no iPhone (barra de estado translucida: o relogio e branco): um veu escuro bem fino no alto mantem o relogio legivel sobre a nevoa clara */
@media (display-mode: standalone) {
  html:not(.escuro) body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top) + 2px);
    z-index: 65;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.42), rgba(17, 17, 17, 0));
  }
}

/* o cartao discreto que pede a permissao dos avisos (so depois da primeira pergunta respondida) e o aviso de dentro do app */
.cartao-avisos {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 12px + var(--nav-altura) + 12px);
  z-index: 28;
  max-width: 728px;
  margin: 0 auto;
  padding: var(--e4);
  display: grid;
  gap: var(--e3);
}

.cartao-avisos-texto {
  display: grid;
  gap: 2px;
}

.aviso-no-app {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 16px;
  right: 16px;
  z-index: 76;
  max-width: 520px;
  min-height: var(--alvo);
  margin: 0 auto;
  padding: var(--e3) var(--e4);
  border-radius: 22px;
  display: grid;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
  animation: monk-sobe 0.3s var(--mola);
}

/* ---------- transicoes de app: View Transitions (so transform e opacity) e o gesto de voltar ---------- */
.barra-app {
  view-transition-name: barra-de-abas; /* a barra fica PARADA enquanto a tela troca */
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: var(--mola);
}

html[data-vt="empurrar"]::view-transition-old(root) {
  animation-name: vt-sai-esquerda;
}

html[data-vt="empurrar"]::view-transition-new(root) {
  animation-name: vt-entra-direita;
}

html[data-vt="voltar"]::view-transition-old(root) {
  animation-name: vt-sai-direita;
  z-index: 2;
}

html[data-vt="voltar"]::view-transition-new(root) {
  animation-name: vt-entra-esquerda;
}

html[data-vt="esmaecer"]::view-transition-old(root),
html[data-vt="esmaecer"]::view-transition-new(root) {
  animation-duration: 0.15s;
  animation-timing-function: ease-out;
}

@keyframes vt-entra-direita {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes vt-sai-esquerda {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translate3d(-28%, 0, 0);
    opacity: 0.6;
  }
}

@keyframes vt-sai-direita {
  from {
    transform: none;
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes vt-entra-esquerda {
  from {
    transform: translate3d(-28%, 0, 0);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* a tela que acompanha o dedo no gesto de voltar: uma sombra na borda dela */
.deslizando {
  box-shadow: -12px 0 28px -12px rgba(0, 0, 0, 0.35);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html[data-vt] ::view-transition-old(root),
  html[data-vt] ::view-transition-new(root) {
    animation-name: monk-esmaece;
    animation-duration: 0.15s;
  }

  html[data-vt] ::view-transition-old(root) {
    animation: none;
    opacity: 0;
  }
}

/* =====================================================================================================================
   COMPUTADOR (N13, de 1024 px para cima): a coluna das secoes, o meio e a conversa do Ragha. No celular estes tres pedacos sao a capsula de baixo, a tela
   e a aba Ragha.
   ===================================================================================================================== */
.inicio-novo {
  display: none;
}

.secoes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 20px var(--e3);
  border-radius: 30px;
}

.secoes-topo {
  padding: 0 var(--e2) 20px;
}

.secao-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 var(--e3);
  border-radius: 21px;
  color: var(--ink2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.secao-link.nav-on {
  color: var(--ink);
  font-weight: 700;
}

.secao-link-rotulo {
  flex-grow: 1;
}

.secoes-uso {
  margin-top: auto;
  padding: 14px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.secoes-uso-topo {
  display: flex;
  font-size: 12px;
  font-weight: 700;
}

.secoes-uso-topo strong {
  flex-grow: 1;
}

.ragha-lado {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}

.ragha-lado-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 18px var(--margem-larga);
  border-bottom: 1px solid var(--line);
}

.ragha-lado-fala {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--margem-larga);
  overflow: auto;
  overscroll-behavior: contain;
}

.ragha-lado-balao {
  display: grid;
  gap: 2px;
  max-width: 300px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.ragha-lado-dele {
  align-self: flex-start;
  background: var(--well);
  border-radius: 20px 20px 20px 6px;
}

.ragha-lado-eu {
  align-self: flex-end;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 20px 20px 6px 20px;
}

.ragha-lado-eu .balao-texto,
.ragha-lado-eu .tempo {
  color: var(--on-ink);
}

.ragha-lado-abrir {
  margin: 0 var(--e4) var(--e4);
}

@media (min-width: 1024px) {
  #conteudo {
    display: flex;
    align-items: flex-start;
    gap: var(--e5);
    max-width: none;
    padding: var(--e5);
  }

  .col-lista {
    position: sticky;
    top: var(--e5);
    flex: 0 0 236px;
    height: calc(100dvh - 48px);
  }

  .col-meio {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 880px;
  }

  .col-detalhes {
    position: sticky;
    top: var(--e5);
    flex: 0 0 384px;
    height: calc(100dvh - 48px);
  }

  body[data-rota="p"] #conteudo,
  body[data-rota="ragha"] #conteudo {
    padding-bottom: var(--e5);
  }

  /* o Inicio com a saudacao e o botao "Novo recado" lado a lado, e a fila em duas colunas */
  .inicio-saudacao {
    display: flex;
    align-items: flex-end;
    gap: var(--e3);
  }

  .inicio-saudacao-texto {
    flex-grow: 1;
  }

  .inicio-novo {
    display: inline-flex;
    padding: 0 20px;
  }

  .fila-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .inicio-topo {
    display: none; /* o logo e o Ajustes moram na coluna das secoes */
  }

  .tela-topo {
    padding-top: var(--e3);
  }

  .compositor {
    margin: 0 calc(-1 * var(--e5));
  }

  .buscar-campo {
    left: calc(236px + 48px);
    right: calc(384px + 48px);
    bottom: var(--e5);
  }

  .barra-app,
  .circulo-nav {
    display: none;
  }

  .abertura {
    z-index: 20;
  }
}

/* ---------- a folha do Novo recado ---------- */
.novo-caixa {
  display: block;
  margin-top: var(--e2);
  padding: 14px var(--e4);
  border-radius: 22px;
}

.novo-campo {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
}

.novo-campo::placeholder {
  color: var(--ink3);
  opacity: 1;
}

.novo-rotulo {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
}

.novo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e2);
}

.novo-enviar {
  margin-top: auto;
  width: 100%;
  min-height: 56px;
  border-radius: 28px;
}

.folha-novo .folha-corpo {
  gap: 0;
}

.folha-novo .novo-enviar {
  margin-top: var(--e5);
}

/* ---------- a folha "o que esta fazendo agora" (N05) ---------- */
.agora-corpo {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.agora-heroi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.agora-nome {
  margin: var(--e3) 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.agora-etiqueta {
  height: 28px;
  margin-top: var(--e2);
  padding: 0 12px;
  border-radius: 14px;
}

.etiqueta .vivo {
  width: 7px;
  height: 7px;
}

.agora-projeto {
  margin: var(--e3) 0 0;
  text-align: center;
  font-size: 13px;
}

.agora-subtitulo {
  margin: var(--e5) 0 0;
}

.agora-agentes,
.agora-linhas {
  margin-top: var(--e3);
  padding: 0;
  list-style: none;
}

.agora-linha-nome {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

.agora-linha-nome .linha-meta {
  margin-left: auto;
}

.agora-ninguem {
  margin-top: var(--e3);
  text-align: center;
}

.agora-acoes {
  margin-top: auto;
  padding-top: var(--e5);
  display: flex;
  gap: 10px;
}

.agora-acoes .botao {
  flex: 1 1 0;
}

.decisao-tarefa {
  text-decoration: none;
  color: var(--ardosia);
}

.lista-cartao {
  padding: 0;
  list-style: none;
}