/*
 * Os limites de uso: o que resta acima de cada formulário ("2 de 5 chamados
 * em novembro"), a explicação que toma o lugar do formulário no limite, o
 * "Uso e limites" da página do usuário na administração, /admin/limites e o
 * painel /admin/uso.
 *
 * Mora aqui o que só os limites desenham. Cor, espaço, cartão, botão,
 * etiqueta e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 */

/* ---------- Os três recursos, cada um no seu cartão ---------- */

/* Lado a lado quando a tela deixa, um embaixo do outro no celular: os três
   são irmãos, e compará-los é metade do motivo de abrir a tela. */
.limites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.limite { display: flex; flex-direction: column; gap: .65rem; }

.limite__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  margin: 0;
}

.limite__valor { margin: 0; }

.limite__nota { margin: 0; font-size: .875rem; color: var(--ink-medio); }

.limite__uso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin: 0;
  font-weight: 600;
}

/* A barra de `.progresso` nasceu numa linha flexível, onde cresce para os
   lados. Dentro do cartão, que empilha, ela cresceria para baixo. */
.limite__barra { flex: none; }

/* O formulário mora num cartão estreito: uma coluna só, sem o teto de largura
   dos formulários de página. */
.limite__form { grid-template-columns: minmax(0, 1fr); max-width: none; gap: .9rem; }

/* O número é de "um número": recuado sob a opção, para ler como parte dela. */
.limite__quantidade { margin: .5rem 0 .5rem 1.6rem; }
.limite__quantidade + .opcao { margin-top: 0; }

/* ---------- O painel do mês ---------- */

/* O seletor do mês mora na barra de busca, que só desenha o campo de texto:
   aqui ele ganha a mesma caixa dos campos de formulário. */
.uso__mes { margin-bottom: 1.25rem; }
.uso__mes select {
  min-width: 13rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}

.uso__alerta { margin-bottom: 1.25rem; }

.uso__secoes { margin-bottom: 0; }

/* O e-mail embaixo do nome, menor: é o que desempata duas pessoas com o mesmo
   nome, e não o que se procura primeiro. */
.uso__email { display: block; font-size: .8125rem; color: var(--ink-fraco); }

/* O uso e o destaque um embaixo do outro, alinhados pelo número. */
.uso__celula { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

.uso__anonimo { color: var(--ink-fraco); font-style: italic; }

@media (max-width: 48rem) {
  /* Na ficha do celular a célula vira linha, e o número vai para a esquerda,
     junto do rótulo que a tabela empresta. */
  .uso__celula { align-items: flex-start; }
}