/* Atlantes - folha de estilo unica.
   Sem framework externo: a tela tem de abrir rapido em celular ruim e em
   conexao instavel, que e onde a cobranca acontece. */

/* PAPEL CREME.
   A tela cinza-azulada anterior era a de um painel de software. Esta e a de um
   livro-caixa: fundo creme, tinta escura quente, e o vermelho e o verde do
   dinheiro por cima. A escolha nao e so gosto - quem usa isto passa o dia
   olhando numero, muitas vezes no sol, e branco puro em tela de celular
   cansa a vista mais depressa que um creme de baixo contraste.

   Toda cor vive aqui. Nenhum arquivo de tela repete valor hexadecimal: trocar
   a identidade do sistema e trocar este bloco. */
:root {
  --bg: #f2ebdc;          /* o papel */
  --surface: #fbf7ee;     /* a folha por cima do papel */
  --surface-2: #f5efe1;
  --borda: #e0d5bf;
  --texto: #24201a;       /* tinta, nao preto */
  --texto-fraco: #6d6455;
  --acento: #3c3a8f;      /* azul de caneta */
  --acento-fraco: #e9e6f3;
  --positivo: #1a6b3c;
  --positivo-fraco: #e6efe2;
  --negativo: #a3291d;    /* vermelho de carimbo */
  --negativo-fraco: #f7e5df;
  --alerta: #94590f;
  --alerta-fraco: #f6ead2;
  --raio: 10px;
  /* A sombra tambem e quente. Cinza-azulada sobre creme fica suja. */
  --sombra: 0 1px 2px rgba(74, 58, 30, .07), 0 1px 3px rgba(74, 58, 30, .05);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* A contraparte escura nao e o creme invertido - e a mesma mesa a noite:
   marrom-carvao em vez do cinza-azulado de antes, e a tinta clara puxando
   para o creme. Trocar so o claro deixaria quem usa o celular no escuro com
   um sistema que parece de outro produto. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130f; --surface: #1e1a15; --surface-2: #24201a;
    --borda: #332c23; --texto: #eae2d3; --texto-fraco: #a29884;
    --acento: #a9a5f0; --acento-fraco: #26233a;
    --positivo: #5cc98a; --positivo-fraco: #172318;
    --negativo: #ef8779; --negativo-fraco: #2b1a16;
    --alerta: #e0aa4a; --alerta-fraco: #2a2115;
    --sombra: 0 1px 3px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* A trama do papel: linhas de 1px a cada 3px, quase invisiveis. E gradiente
     e nao imagem de proposito - a folha de estilo continua sendo o unico
     arquivo que a tela precisa baixar, o que importa no celular ruim em que
     a cobranca acontece. */
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    0deg, rgba(120, 96, 48, .022) 0 1px, transparent 1px 3px);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; letter-spacing: -.015em; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.topo-movel { display: none; }

.lateral {
  width: 220px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--borda); padding: 1rem .75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.marca { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; padding: .25rem .5rem; }
/* `> span` e nao `span`: o envolucro do texto da marca tambem e um span, e
   sem o filho direto ele herdava o azul - a palavra inteira ficava azul, em
   vez de so a segunda metade. */
.marca .marca-texto > span { color: var(--acento); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  padding: .5rem .65rem; border-radius: 8px; color: var(--texto-fraco);
  font-size: .9rem; font-weight: 500; display: flex; justify-content: space-between;
}
.menu a:hover { background: var(--surface-2); color: var(--texto); text-decoration: none; }
.menu a.ativo { background: var(--acento-fraco); color: var(--acento); font-weight: 600; }
.menu .selo {
  background: var(--negativo); color: #fff; border-radius: 20px;
  padding: 0 .4rem; font-size: .7rem; font-weight: 700; line-height: 1.5;
}
.rodape-lateral { margin-top: auto; font-size: .8rem; color: var(--texto-fraco); padding: .5rem; }

/* Em monitor largo o conteudo esticava a tela toda e as colunas da tabela
   se afastavam a ponto de dificultar a leitura de uma linha. O limite mantem
   a medida de leitura confortavel e centraliza a area util. */
.conteudo {
  flex: 1; min-width: 0; width: 100%;
  max-width: 1400px; margin-inline: auto;
  padding: 1.1rem 1.5rem 3rem;
}
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap;
}

/* ---------- cartoes ---------- */
.cartao {
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .7rem .85rem; box-shadow: var(--sombra);
}
/* Espaco entre cards empilhados um sob o outro. Dentro de .grade quem separa
   e o gap, entao a margem tem de ser zerada - senao o primeiro card da linha
   fica desalinhado dos demais, que sao irmaos adjacentes e recebem a margem. */
.cartao + .cartao { margin-top: .7rem; }
.grade > .cartao + .cartao { margin-top: 0; }
.cartao-titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco); font-weight: 600; margin-bottom: .35rem;
}

.grade { display: grid; gap: .7rem; }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  .grade-4, .grade-3, .grade-2 { grid-template-columns: 1fr; }
  .grade.indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app { flex-direction: column; }
  .lateral { display: none; }
  .topo-movel {
    display: flex; position: sticky; top: 0; z-index: 20;
    align-items: center; justify-content: space-between;
    min-height: 56px; padding: .45rem max(.75rem, env(safe-area-inset-right)) .45rem max(.75rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-bottom: 1px solid var(--borda); backdrop-filter: blur(8px);
  }
  .topo-movel .marca { padding: 0; }
  .menu-movel { position: relative; }
  .menu-movel summary {
    list-style: none; cursor: pointer; min-height: 44px; padding: .6rem .8rem;
    border: 1px solid var(--borda); border-radius: 8px; font-weight: 650;
  }
  .menu-movel summary::-webkit-details-marker { display: none; }
  .menu-movel[open] summary { background: var(--acento-fraco); color: var(--acento); }
  .menu-movel .menu-painel {
    position: fixed; top: 57px; left: .5rem; right: .5rem;
    max-height: calc(100dvh - 69px); overflow-y: auto;
    padding: .6rem; background: var(--surface);
    border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  }
  .menu-movel .menu {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
  }
  .menu-movel .menu a { min-height: 44px; align-items: center; }
  .conta-movel {
    margin: .55rem .15rem .05rem; padding-top: .65rem;
    border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: .82rem;
  }
  .conteudo { padding: .8rem .75rem 5rem; }
  .cabecalho { align-items: flex-start; }
  .cabecalho > * { min-width: 0; }
  .cabecalho .acoes { width: 100%; }
  .cabecalho .acoes .botao { flex: 1 1 10rem; }
  .filtros .acoes { display: grid; grid-template-columns: 1fr; width: 100%; }
  .filtros .campo, .filtros input, .filtros select, .filtros .botao {
    width: 100% !important; max-width: none !important;
  }
}

/* ---------- indicadores ---------- */
.indicador .valor {
  font-size: 1.25rem; font-weight: 680; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.indicador .nota {
  font-size: .74rem; color: var(--texto-fraco); margin-top: .2rem; line-height: 1.35;
}
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.alerta { color: var(--alerta); }

/* ---------- tabelas ---------- */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
  text-align: left; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-fraco); font-weight: 600;
  padding: .4rem .55rem; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
td { padding: .42rem .55rem; border-bottom: 1px solid var(--borda); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 650; border-top: 2px solid var(--borda); border-bottom: 0; }
.destaque-linha { background: var(--acento-fraco); }

/* ---------- etiquetas ---------- */
.etiqueta {
  display: inline-block; padding: .12rem .5rem; border-radius: 20px;
  font-size: .73rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--texto-fraco); border: 1px solid var(--borda);
}
.etiqueta.ok { background: var(--positivo-fraco); color: var(--positivo); border-color: transparent; }
.etiqueta.ruim { background: var(--negativo-fraco); color: var(--negativo); border-color: transparent; }
.etiqueta.atencao { background: var(--alerta-fraco); color: var(--alerta); border-color: transparent; }
.etiqueta.info { background: var(--acento-fraco); color: var(--acento); border-color: transparent; }

/* ---------- formularios ---------- */
/* 16px NO CAMPO, e nao 0.9rem.
   O Safari do iPhone da zoom automatico ao focar um campo com fonte menor que
   16px: a tela pula, o teclado sobe por cima do que a pessoa estava lendo, e
   ela precisa pinçar para voltar. Acontece em todo formulario, e nao aparece
   em nenhum teste de desktop.
   Fora isso, campo de 13px preenchido no sol, com o telefone na mao, e o
   caminho para digitar o valor errado. */
.campo, select, input[type=text], input[type=number], input[type=date], textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--surface); color: var(--texto);
  font: inherit; font-size: 16px;
}
@media (min-width: 821px) {
  /* No computador o zoom nao existe, e o campo pode voltar a acompanhar o
     resto da interface. */
  .campo, select, input[type=text], input[type=number], input[type=date], textarea {
    font-size: .9rem; padding: .5rem .65rem;
  }
}
input, select, textarea, button { max-width: 100%; }
.campo:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.linha-campo { margin-bottom: .85rem; }
.ajuda { font-size: .78rem; color: var(--texto-fraco); margin-top: .25rem; }
.erro { color: var(--negativo); font-size: .82rem; margin-top: .25rem; }

.botao {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem;
  border-radius: 8px; border: 1px solid var(--borda); background: var(--surface);
  color: var(--texto); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  min-height: 44px; justify-content: center;
}
.botao:hover { background: var(--surface-2); text-decoration: none; }
.botao.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao.principal:hover { filter: brightness(1.08); }
.botao.perigo { background: var(--negativo); border-color: var(--negativo); color: #fff; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Listas extensas usam tabela no monitor e cards de leitura rapida no celular. */
.lista-mobile { display: none; }
.item-mobile {
  display: block; color: var(--texto); padding: .75rem 0;
  border-bottom: 1px solid var(--borda);
}
.item-mobile:last-child { border-bottom: 0; }
.item-mobile:hover { text-decoration: none; }
.item-mobile-topo { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.item-mobile-titulo { font-weight: 650; color: var(--acento); }
.item-mobile-meta { color: var(--texto-fraco); font-size: .78rem; margin-top: .15rem; }
.item-mobile-dados {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem .75rem; margin-top: .55rem; font-size: .82rem;
}
.item-mobile-dados strong { display: block; font-variant-numeric: tabular-nums; }
.item-expansivel summary {
  display: flex; justify-content: space-between; gap: .75rem; align-items: center;
  list-style: none; cursor: pointer; min-height: 58px;
}
.item-expansivel summary::-webkit-details-marker { display: none; }
.item-expansivel summary::before { content: "›"; color: var(--texto-fraco); font-size: 1.15rem; }
.item-expansivel[open] summary::before { transform: rotate(90deg); }
.item-expansivel summary > span:first-of-type { min-width: 0; }
.item-expansivel summary .item-mobile-titulo,
.item-expansivel summary .item-mobile-meta { display: block; }
.item-mobile-valor { margin-left: auto; text-align: right; font-weight: 650; white-space: nowrap; }
.item-mobile-valor .etiqueta { display: block; width: max-content; margin: .2rem 0 0 auto; }
.item-mobile-expandido { padding: 0 0 .7rem 1.35rem; }
.paginacao {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .75rem; margin-top: .8rem;
}
.paginacao > :last-child { justify-self: end; }

@media (max-width: 820px) {
  .tabela-desktop { display: none; }
  .lista-mobile { display: block; }
  .cartao.lista-mobile { padding-block: .1rem; }
  .indicadores .cartao { min-width: 0; }
  .indicadores .indicador .valor { font-size: 1.05rem; overflow-wrap: anywhere; }
  .indicadores .indicador .nota { font-size: .69rem; }
  .zap { min-height: 44px; padding-inline: .7rem; }
  .rota-maps { align-items: stretch; flex-direction: column; }
  .rota-maps .acoes, .rota-maps .botao { width: 100%; }
  .cartao { padding-inline: .75rem; }
  .paginacao { grid-template-columns: 1fr 1fr; }
  .paginacao > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .paginacao > :last-child { grid-column: 2; grid-row: 2; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.3rem; }
  .conteudo { padding-inline: .6rem; }
  .grade.indicadores { grid-template-columns: 1fr; }
  .indicadores .indicador .valor { font-size: 1.15rem; }
  .acoes .botao { flex: 1 1 100%; }
  .menu-movel .menu { grid-template-columns: 1fr; }
  .grafico { gap: .45rem; }
  .barra { width: 12px; }
}

/* ---------- mensagens ---------- */
.aviso {
  padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem;
  border: 1px solid var(--borda); font-size: .9rem;
}
.aviso.sucesso { background: var(--positivo-fraco); color: var(--positivo); border-color: transparent; }
.aviso.erro { background: var(--negativo-fraco); color: var(--negativo); border-color: transparent; }
.aviso.info { background: var(--acento-fraco); color: var(--acento); border-color: transparent; }

/* ---------- grafico de barras ---------- */
.grafico { display: flex; align-items: flex-end; gap: .9rem; height: 150px; padding-top: .5rem; }
.grafico-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.barra { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.barra.previsto { background: var(--borda); }

/* Barra empilhada (capital na rua + caixa = patrimonio).
   Em column-reverse o eixo principal e vertical de baixo para cima, entao
   justify-content: flex-start e o que ancora a pilha na base. Com o 'center'
   herdado, as barras ficavam flutuando no meio do grafico. */
.barras.empilhada { flex-direction: column-reverse; justify-content: flex-start; gap: 0; }
.barras.empilhada .barra { width: 22px; border-radius: 0; }
.barras.empilhada .barra.topo { border-radius: 3px 3px 0 0; }
.barra.realizado { background: var(--acento); }
.grafico-rotulo { font-size: .72rem; color: var(--texto-fraco); }
.legenda { display: flex; gap: 1rem; font-size: .78rem; color: var(--texto-fraco); margin-top: .6rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; }

/* ---------- utilitarios ---------- */
.mono { font-family: var(--mono); font-size: .82rem; }
.fraco { color: var(--texto-fraco); }
.pequeno { font-size: .82rem; }
.centro { text-align: center; }
.vazio { padding: 2rem; text-align: center; color: var(--texto-fraco); font-size: .9rem; }
pre.memoria {
  font-family: var(--mono); font-size: .78rem; line-height: 1.45;
  background: var(--surface-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem; overflow-x: auto; margin: 0;
}
.barra-progresso { height: 6px; background: var(--borda); border-radius: 3px; overflow: hidden; }
.barra-progresso i { display: block; height: 100%; background: var(--positivo); }


/* ---------- WhatsApp ---------- */
.zap {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 6px; font-size: .76rem; font-weight: 600;
  background: var(--positivo-fraco); color: var(--positivo);
  border: 1px solid transparent; white-space: nowrap;
}
.zap:hover { text-decoration: none; filter: brightness(.96); }
.zap.desabilitado { background: var(--surface-2); color: var(--texto-fraco); cursor: not-allowed; }

/* ---------- roteiro de rua ---------- */
.parada { break-inside: avoid; page-break-inside: avoid; }
.parada + .parada { margin-top: .7rem; }
.parada-cabecalho {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: .4rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--borda);
}
.visita { padding: .5rem 0; border-bottom: 1px solid var(--borda); break-inside: avoid; }
.visita:last-child { border-bottom: 0; }
.visita-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.visita-nome { font-weight: 650; }
.visita-endereco { font-size: .84rem; color: var(--texto-fraco); margin-top: .1rem; }
.visita-parcelas { font-size: .78rem; color: var(--texto-fraco); margin-top: .25rem; }
.assinatura {
  margin-top: .5rem; border-top: 1px dashed var(--borda); padding-top: .3rem;
  font-size: .7rem; color: var(--texto-fraco); display: none;
}
.rota-maps {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: .7rem;
}

/* ---------- impressao ---------- */
@media print {
  @page { margin: 12mm; }
  /* Papel de verdade nao precisa da trama do papel de mentira - e o roteiro
     de rua sai impresso todo dia. */
  body { background: #fff; background-image: none; color: #000; font-size: 11pt; }
  .lateral, .acoes, .cabecalho .acoes, .naoimprime, .zap, form { display: none !important; }
  .conteudo { max-width: none; padding: 0; }
  .cartao { border: 0; box-shadow: none; padding: 0; break-inside: avoid; }
  .cartao + .cartao { margin-top: .8rem; }
  a { color: #000; text-decoration: none; }
  .assinatura { display: block; }
  .rolagem { overflow: visible; }
  table { font-size: 10pt; }
  th { border-bottom: 1px solid #000; }
  td { border-bottom: 1px solid #ddd; }
  .parada-cabecalho { border-bottom: 1.5pt solid #000; }
}

/* ---------- o simbolo da marca ---------- */
/* Embutido e em `currentColor`: pinta junto com o texto ao lado, no claro e no
   escuro, sem uma copia por cor. `em` e nao `px` para acompanhar o tamanho da
   palavra onde quer que ela apareca. */
.marca { display: flex; align-items: center; gap: .42em; }
.marca .simbolo { width: 1.05em; height: 1.05em; flex: none; color: var(--acento); }
.marca-texto { line-height: 1; }

/* Recebimento estornado: continua na lista, riscado e apagado. Ele nao conta
   mais em conta nenhuma, mas quem procura "por que este contrato mudou"
   precisa achar a resposta aqui. */
tr.estornado td { color: var(--texto-fraco); text-decoration: line-through; }
tr.estornado td:last-child { text-decoration: none; }
tr.estornado-motivo td { padding-top: 0; font-size: .8rem; border-top: 0; }

/* ---------- mutirao de cobranca ---------- */
/* Uma pessoa por tela. Tudo grande: quem usa isto esta com o telefone na mao,
   as vezes no sol, e erra o alvo se o botao for do tamanho de um link. */
.mutirao-progresso { padding: .8rem 1.1rem; }
.mutirao-progresso b { font-size: 1.3rem; }
.mutirao-pessoa { margin-top: .7rem; }
.mutirao-cabeca { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.mutirao-cabeca h2 { margin: 0 0 .15rem; }
.mutirao-valor { text-align: right; flex: none; }
.mutirao-valor b { display: block; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.mutirao-mensagem {
  white-space: pre-wrap; background: var(--bg); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem;
  font-size: .92rem; line-height: 1.55;
}
.mutirao-acoes { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; align-items: center; }
.mutirao-acoes form { margin: 0; }
.botao.grande { padding: .75rem 1.4rem; font-size: 1rem; }
.centro { text-align: center; }

@media (max-width: 560px) {
  .mutirao-cabeca { flex-direction: column; }
  .mutirao-valor { text-align: left; }
  .mutirao-acoes { flex-direction: column; align-items: stretch; }
  .mutirao-acoes .botao, .mutirao-acoes form { width: 100%; }
  .mutirao-acoes .botao { justify-content: center; }
  .mutirao-acoes form .botao { width: 100%; }
}

/* ---------- ritmo da tabela ---------- */
/* Dado que nao pode quebrar: telefone, cidade, data, codigo. Quebrado em duas
   linhas ele nao vira mais legivel - so faz aquela linha ficar mais alta que
   as vizinhas, e a tabela inteira sai serrilhada. */
td.inteiro, th.inteiro { white-space: nowrap; }

/* Etiquetas lado a lado, nunca empilhadas: duas etiquetas de estado que caem
   uma sobre a outra dobram a altura da linha, e numa lista de cem linhas isso
   e a diferenca entre varrer com o olho e ter de ler uma por uma. */
td.etiquetas { white-space: nowrap; }
td.etiquetas .etiqueta + .etiqueta { margin-left: .25rem; }

/* Altura de linha estavel. O `vertical-align` alinha o texto pela primeira
   linha quando alguma celula tiver duas - a coluna de nome com apelido, por
   exemplo -, em vez de centralizar e desalinhar o resto. */
tbody td { vertical-align: middle; }

/* ---------- mutirao no telefone ---------- */
/* A tela da rua. Quem usa isto esta em pe, com o telefone numa mao, e faz o
   mesmo gesto dezenas de vezes seguidas - entao os botoes moram no rodape,
   onde o polegar alcanca sem trocar a pegada, e nao depois de rolar a
   mensagem inteira.

   A mensagem vem recolhida: o texto e quase sempre o mesmo, o operador aprende
   em tres cobrancas, e ler 260px de texto antes de achar o botao e o que
   transforma 58 cobrancas em meia hora. Quem quiser conferir, abre. */
@media (max-width: 820px) {
  .mutirao-mensagem { max-height: 7.5rem; overflow: auto; font-size: .88rem; }

  .mutirao-acoes {
    position: sticky; bottom: 0; z-index: 5;
    margin: 1rem -1rem -1rem; padding: .7rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 12px rgba(74, 58, 30, .07);
  }
  /* WhatsApp e "Enviei" lado a lado - sao o par que se repete. "Pular" fica
     embaixo e menor: e a saida, nao o caminho. */
  .mutirao-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .mutirao-acoes > form { display: contents; }
  .mutirao-acoes .botao { width: 100%; justify-content: center; }
  .mutirao-acoes form:last-of-type .botao {
    grid-column: 1 / -1; padding-block: .55rem; font-size: .9rem;
  }
  .mutirao-pessoa { padding-bottom: 0; }
  .mutirao-pessoa > p:last-child { display: none; }
}