/* O BOLETIM: a tela Indicadores.
 *
 * Escopo proprio, como a TV: o `index.html` nao carrega este arquivo, e esta pagina nao carrega o
 * `estilo.css`. As tres telas compartilham os TOKENS DE COR, as FONTES e as duas rendicoes -- e nada
 * de layout. Registrado no DESIGN.md ("O boletim") antes de aparecer aqui.
 *
 * NENHUM PASSO DE FONTE NOVO: 34/28, 19, 15, 14, 13, 12 e 11 saem da escala fechada da ficha.
 */

@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fontes/courier-prime-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Os mesmos tokens da ficha. Cor e identidade do produto, e nao da tela. */
  --tinta:        #1d5c6b;   /* 7,51:1 sobre papel */
  --tinta-fraca:  #5b8e9b;   /* reguas; nunca carrega texto */
  --papel:        #ffffff;
  --conteudo:     #1a1a1a;   /* 17,4:1 */
  --conteudo-fraco:#5a5347;  /* 6,7:1 */
  --alerta:       #b3352a;   /* 6,07:1 -- so alerta de verdade */
  --sobre-tinta:  #ffffff;
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%231d5c6b' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");

  --serifado: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --datilo:   'Courier Prime', 'Courier New', ui-monospace, monospace;
  --regua: 1px solid var(--tinta-fraca);
  --regua-forte: 1px solid var(--tinta);
  --u: 4px;
  color-scheme: light;
}

/* A mesma chapa na mesa de luz, pelo relogio (ver `indicadores.js`). */
[data-rendicao="noite"] {
  --tinta:        #7fd0e4;
  --tinta-fraca:  #3d6b78;
  --papel:        #101a1e;
  --conteudo:     #e8eef0;
  --conteudo-fraco:#a8b6bb;
  --alerta:       #ff8a7a;
  --sobre-tinta:  #101a1e;
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%237fd0e4' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--papel) var(--grade);
  color: var(--conteudo);
  font-family: var(--serifado);
  font-size: 15px;
  line-height: 1.45;
}

::selection { background: var(--tinta); color: var(--sobre-tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.boletim {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 10);
}

/* ---------------------------------------------------------------------------------------------
   O topo: marca, titulo, as tres telas e o carimbo de atualizacao
   --------------------------------------------------------------------------------------------- */

.topo {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: calc(var(--u) * 5);
  padding-bottom: calc(var(--u) * 4);
  border-bottom: var(--regua-forte);
}

.topo__escudo { display: block; width: 46px; height: auto; }

.topo__marca {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.topo__titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.topo__nav { display: flex; gap: calc(var(--u) * 5); }

.topo__nav a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  padding: calc(var(--u) * 2) 0;
  border-bottom: 2px solid transparent;
}
.topo__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A tela em que se esta: regua cheia embaixo, e nao cor -- a navegacao le igual sem cor. */
.topo__nav a[aria-current="page"] { border-bottom-color: var(--tinta); }

.topo__estado { display: flex; align-items: center; gap: calc(var(--u) * 3); }

.topo__carimbo {
  margin: 0;
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
  white-space: nowrap;
}

.botao {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel);
  border: var(--regua-forte);
  border-radius: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  min-height: 36px;
  cursor: pointer;
}
.botao:hover { background: var(--tinta); color: var(--sobre-tinta); }
.botao:disabled { cursor: progress; }

/* ---------------------------------------------------------------------------------------------
   Os filtros
   --------------------------------------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 5) 0 calc(var(--u) * 3);
}

.filtros__rotulo {
  display: block;
  margin: 0 0 calc(var(--u) * 2);
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.filtros__periodo { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.filtros__periodo legend { float: left; width: 100%; }

/* O PERIODO E UM GRUPO DE RADIO DE VERDADE, desenhado como uma regua segmentada: o teclado anda
   com as setas, o leitor de tela anuncia "1 de 3", e a opcao marcada e cheia de tinta. */
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: block;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  min-height: 36px;
  border: var(--regua-forte);
  margin-left: -1px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel);
  line-height: 20px;
}
.opcao:first-of-type span { margin-left: 0; }
.opcao input:checked + span { background: var(--tinta); color: var(--sobre-tinta); }
.opcao input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }

.filtros__condominio select {
  font: inherit;
  font-size: 15px;
  color: var(--conteudo);
  background: var(--papel);
  border: var(--regua-forte);
  border-radius: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  min-height: 36px;
  min-width: 220px;
}

/* AS DATAS DO PERIODO PERSONALIZADO: o mesmo desenho do seletor de condominio. */
.filtros__datas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--u) * 3); margin: 0; padding: 0; border: 0; }
.filtros__datas legend { float: left; width: 100%; }
.filtros__data span {
  display: block;
  margin-bottom: calc(var(--u) * 1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
}
.filtros__data input {
  font-family: var(--datilo);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo);
  background: var(--papel);
  border: var(--regua-forte);
  border-radius: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  min-height: 36px;
}

.recorte {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}

/* ---------------------------------------------------------------------------------------------
   Os avisos: erro e vazio
   --------------------------------------------------------------------------------------------- */

.aviso {
  margin: 0 0 calc(var(--u) * 5);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border: var(--regua-forte);
  background: var(--papel);
  font-size: 14px;
}
.aviso--vazio { color: var(--conteudo); }
/* A falha de carregamento e problema de verdade: o unico vermelho desta tela. */
.aviso--erro { border-color: var(--alerta); }
.aviso__titulo { margin: 0; font-weight: 700; color: var(--alerta); }
.aviso__detalhe { margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); color: var(--conteudo-fraco); }
.aviso__detalhe:empty { display: none; }

/* ---------------------------------------------------------------------------------------------
   Os campos: a pergunta e o numero
   --------------------------------------------------------------------------------------------- */

.campos {
  display: grid;
  /* Cinco campos numa linha desde o ticket 05 (o potencial de melhoria). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--regua-forte);
  border-left: var(--regua);
  background: var(--papel);
}

/* A segunda linha (081): entregas. Quatro colunas -- o ticket 07 poe o tempo tipico e as falhas
   tecnicas ao lado --, e a regua forte de cima separa atendimento de entrega. */
.campos--entregas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: calc(var(--u) * 4);
}

.campo {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 4);
  border-right: var(--regua);
  border-bottom: var(--regua);
  min-height: 220px;
}

.campo__rotulo {
  margin: 0;
  /* Duas linhas reservadas: com cinco colunas "Potencial de melhoria" quebra, e o numero do campo
     tem de continuar na altura do vizinho. */
  min-height: 2.9em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* O numero do campo: datilografado, peso 400, sem espacejamento (Regra do Numero de Campo). */
.campo__num {
  font-family: var(--datilo);
  font-weight: 400;
  letter-spacing: 0;
  margin-right: calc(var(--u) * 2);
}

/* ALTURAS MINIMAS de duas linhas na pergunta e na fracao: com elas, o numero de cada campo cai na
   MESMA altura dos vizinhos, e a linha de numeros le como uma linha. Sem elas, uma fracao que
   quebrava em duas linhas subia o numero do campo 02 acima dos outros. */
.campo__pergunta {
  margin: calc(var(--u) * 2) 0 calc(var(--u) * 3);
  min-height: 2.7em;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--conteudo);
}

.campo__valor {
  margin: 0;
  font-family: var(--datilo);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo);
}

.campo__fracao {
  margin: calc(var(--u) * 1) 0 0;
  min-height: 2.9em; /* duas linhas, e existe mesmo vazia: nada muda de lugar */
  font-family: var(--datilo);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}

/* A VARIACAO contra o periodo anterior. Tinta unica e sem cor de "bom" ou "ruim": mais transferencia
   nao e necessariamente pior (pode ser mais visita), e o sinal ja diz a direcao. A caixa existe mesmo
   vazia, para os numeros dos quatro campos continuarem na mesma altura. */
.campo__variacao {
  margin: calc(var(--u) * 1) 0 0;
  min-height: 1.45em;
  font-family: var(--datilo);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo);
}

/* O aviso de recorte filtrado: a unica linha da faixa do recorte que nao e datilografada, porque
   ela e uma explicacao, e nao um dado. */
.recorte--filtro { font-family: var(--serifado); font-size: 13px; color: var(--conteudo); }

/* Carregando: o campo fica no lugar, e o numero anterior esmaece por COR declarada, nunca opacidade. */
.campos[aria-busy="true"] .campo__valor { color: var(--conteudo-fraco); }

/* A nota do potencial (078): quantas transferencias ainda nao tem motivo -- o que faz dele um piso. */
.campo__nota { margin: calc(var(--u) * 1) 0 0; font-size: 13px; color: var(--conteudo-fraco); }

.campo__ajuda { margin-top: calc(var(--u) * 3); font-size: 13px; }
.campo > .campo__ajuda { margin-top: auto; padding-top: calc(var(--u) * 3); }
.campo__ajuda summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  width: fit-content;
}
.campo__ajuda p { margin: calc(var(--u) * 2) 0 0; color: var(--conteudo); max-width: 60ch; }

.nota {
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) 0;
  border-bottom: var(--regua);
}
.nota__texto {
  margin: 0;
  font-family: var(--datilo);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
   Os graficos (ticket 04): barras em HTML/CSS, na escala tipografica fechada
   --------------------------------------------------------------------------------------------- */

.graficos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(var(--u) * 6);
  border-top: var(--regua-forte);
  border-left: var(--regua);
  background: var(--papel);
}

.grafico {
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-right: var(--regua);
  border-bottom: var(--regua);
  min-width: 0;
}

/* Nos graficos a pergunta nao precisa alinhar numero com o vizinho: sem a altura minima dos
   campos, que no telefone abria um vao de tres linhas. */
.grafico .campo__pergunta { min-height: 0; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 5);
  margin: 0 0 calc(var(--u) * 4);
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.legenda li { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.legenda__nota { margin: 0 0 calc(var(--u) * 4); font-size: 13px; color: var(--conteudo-fraco); }

/* AS SERIES SE DISTINGUEM PELA FORMA, e nao so pela cor: cheia, fraca e VAZADA. Quem nao distingue
   as duas densidades da tinta ainda ve o contorno do "nao concluido". */
.amostra { display: inline-block; width: 12px; height: 12px; }
.amostra--resolvidos, .segmento--resolvidos, .segmento--horario { background: var(--tinta); }
.amostra--transferidos, .segmento--transferidos { background: var(--tinta-fraca); }
/* O vazado e um CONTORNO DESENHADO POR DENTRO (outline com deslocamento negativo): borda de verdade
   somaria 2px a altura e inflaria os segmentos pequenos, e sombra o DESIGN.md nao permite. */
.amostra--nao_concluidos, .segmento--nao_concluidos { background: var(--papel); outline: 1px solid var(--tinta-fraca); outline-offset: -1px; }

.barras {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 180px;
  padding-top: calc(var(--u) * 5);
  border-bottom: var(--regua-forte);
}
/* O maior valor do grafico, no canto: a escala da altura, sem eixo vertical desenhado. */
.barras::before {
  content: attr(data-maximo);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--datilo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}
.coluna { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; }
.segmento { width: 100%; }

.eixo { display: flex; gap: 2px; margin-top: calc(var(--u) * 1); }
.eixo span {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  font-family: var(--datilo);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--conteudo-fraco);
}

/* OS MOTIVOS (078): barras HORIZONTAIS, porque sao categorias. A forma separa os grupos -- cheia para
   o que o produto pode corrigir, fraca para a triagem correta, vazada para o que nao tem motivo --,
   e o numero vai escrito ao lado de cada barra. */
.motivos__grupo + .motivos__grupo { margin-top: calc(var(--u) * 4); }
.motivos__titulo {
  margin: 0 0 calc(var(--u) * 2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}
.motivos__lista { margin: 0; padding: 0; list-style: none; }
.motivo {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 1) 0;
  font-size: 13px;
}
.motivo__trilho { display: block; height: 12px; }
.motivo__barra { display: block; height: 100%; }
.motivo__barra--melhoria { background: var(--tinta); }
.motivo__barra--escopo { background: var(--tinta-fraca); }
.motivo__barra--sem_classificacao { background: var(--papel); outline: 1px solid var(--tinta-fraca); outline-offset: -1px; }
/* AS ENTREGAS (081) usam as mesmas linhas. O que so a Central poderia resolver e o unico vermelho do
   grafico, e vai tambem ESCRITO ao lado do nome: a cor nunca e o unico sinal. */
.motivo__barra--problema { background: var(--alerta); }
/* Em andamento: vazada como "sem classificacao" nos motivos -- a forma diz "ainda nao se sabe". */
.motivo__barra--em_andamento { background: var(--papel); outline: 1px solid var(--tinta-fraca); outline-offset: -1px; }
.motivo__marca {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alerta);
}
.resumo {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: calc(var(--u) * 1) calc(var(--u) * 4);
  margin: calc(var(--u) * 4) 0 0;
  padding-top: calc(var(--u) * 3);
  border-top: var(--regua);
  font-size: 13px;
}
.resumo dt { font-weight: 700; }
.resumo dd { margin: 0; font-family: var(--datilo); font-variant-numeric: tabular-nums; }
.motivo__numero {
  font-family: var(--datilo);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.motivos__significados { margin: calc(var(--u) * 2) 0 0; font-size: 13px; }
.motivos__significados dt { font-weight: 700; margin-top: calc(var(--u) * 2); }
.motivos__significados dd { margin: 0; color: var(--conteudo); max-width: 60ch; }

.grafico__vazio { margin: calc(var(--u) * 4) 0; font-size: 14px; }

.tabela {
  margin-top: calc(var(--u) * 2);
  border-collapse: collapse;
  font-family: var(--datilo);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tabela th, .tabela td { padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 1) 0; text-align: right; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela th { font-family: var(--serifado); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta); }
.tabela tbody tr { border-top: var(--regua); }

/* POR CONDOMINIO (082): a tabela larga, fora da grade de dois graficos. */
.grafico--largo {
  margin-top: calc(var(--u) * 6);
  border-top: var(--regua-forte);
  border-left: var(--regua);
  background: var(--papel);
}
.tabela--condominios { width: 100%; }
/* A celula do nome nao herda o titulo de coluna (11px caixa-alta) da .tabela. */
.tabela--condominios tbody th { text-align: left; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2) 0; }
/* O nome filtra a tela: um botao com cara de texto sublinhado, e o foco visivel do navegador. */
.condominio__nome {
  font: inherit;
  font-family: var(--serifado);
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.condominio__nome:disabled { color: var(--conteudo); text-decoration: none; cursor: default; }
.condominio__nota { display: block; font-family: var(--serifado); font-size: 13px; color: var(--conteudo-fraco); }
#ver-todos { margin-top: calc(var(--u) * 4); }

.rodape {
  margin-top: calc(var(--u) * 8);
  font-size: 13px;
  color: var(--conteudo-fraco);
  max-width: 80ch;
}

/* ---------------------------------------------------------------------------------------------
   Notebook e tablet: os campos em duas colunas
   --------------------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .campos, .campos--entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graficos { grid-template-columns: minmax(0, 1fr); }
  .topo { grid-template-columns: auto 1fr auto; }
  .topo__nav { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------------------------------------
   Telefone: 16px de margem, nada rola de lado
   --------------------------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .boletim { padding: calc(var(--u) * 4) 16px calc(var(--u) * 8); }
  .topo { grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); }
  .topo__estado { grid-column: 1 / -1; justify-content: space-between; }
  /* As tres telas numa linha so a 390px: sem isso "Tela da Central" caia sozinha na linha de baixo. */
  .topo__nav { gap: calc(var(--u) * 3); flex-wrap: wrap; }
  .topo__nav a { letter-spacing: 0.08em; }
  /* O rotulo do campo pode quebrar em duas linhas na coluna estreita ("Resolvidos pela Pati"):
     com a altura reservada, o numero continua na mesma altura do vizinho. */
  .campo__rotulo { min-height: 2.9em; }
  .filtros { gap: calc(var(--u) * 4); }
  .filtros__condominio, .filtros__condominio select { width: 100%; min-width: 0; }
  .filtros__data, .filtros__data input { width: 100%; }
  .filtros__datas .botao { width: 100%; }
  .campo { padding: calc(var(--u) * 3); min-height: 0; }
  .campo__pergunta { min-height: 4.05em; } /* tres linhas na coluna estreita */
  /* No telefone o nome do motivo fica em cima, e a barra e o numero numa linha embaixo. */
  .motivo { grid-template-columns: minmax(0, 1fr) auto; }
  .motivo__nome { grid-column: 1 / -1; }
  .resumo { grid-template-columns: minmax(0, 1fr); }
  .resumo dd { margin-bottom: calc(var(--u) * 2); }
  .campo__valor { font-size: 28px; }
  /* No telefone a tabela por condominio vira LISTA: um bloco por predio, cada numero com o titulo da
     coluna ao lado. Nada rola de lado. */
  .tabela--condominios thead { display: none; }
  .tabela--condominios, .tabela--condominios tbody, .tabela--condominios tr,
  .tabela--condominios th, .tabela--condominios td { display: block; width: 100%; }
  .tabela--condominios tr { padding: calc(var(--u) * 2) 0; }
  .tabela--condominios td { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1) 0; text-align: right; }
  .tabela--condominios td::before { content: attr(data-coluna); font-family: var(--serifado); color: var(--conteudo-fraco); text-align: left; }
}