/* Fatia C1 — Planos configuráveis.
   Duas telas: o catálogo do backoffice (/admin/planos) e o painel de uso do
   plano que o gabinete vê na própria assinatura. */

/* ── Backoffice ────────────────────────────────────────────────────────── */

.plano-aviso {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  padding: var(--esp-3);
  margin-bottom: var(--esp-4);
  border-radius: var(--raio-2);
  background: var(--cor-atencao-suave, #fff7e6);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
}

.plano-carteira {
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--esp-2);
}

.campo__ajuda--custo { color: var(--cor-atencao-texto, #8a5a00); }

/* O ícone fica no fluxo do rótulo; a frase completa só aparece em tela larga,
   onde há espaço para ela sem empurrar as caixinhas de módulo para fora. */
.modulo-custo { margin-left: var(--esp-1); vertical-align: middle; opacity: 0.8; }
.modulo-custo__nota { display: none; }

@media (min-width: 1100px) {
  .modulo-custo__nota {
    display: block;
    font-size: var(--texto-xs);
    color: var(--cor-texto-fraco);
    line-height: 1.3;
  }
}

/* ── Uso do plano (tela do gabinete) ───────────────────────────────────── */

.uso-do-plano { display: grid; gap: var(--esp-3); }

.uso-linha { display: grid; gap: var(--esp-1); }

.uso-linha__topo {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
}

.uso-linha__numeros { color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; }

.uso-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
}

.uso-barra__preenchimento { height: 100%; border-radius: 999px; background: var(--cor-primaria); }

.uso--aviso .uso-barra__preenchimento { background: var(--cor-atencao, #e0a800); }
.uso--cheio .uso-barra__preenchimento { background: var(--cor-perigo, #c0392b); }
.uso--livre .uso-barra, .uso--livre .uso-barra__preenchimento { background: transparent; }

/* O que o plano NÃO INCLUI não é alarme: é convite. Barra apagada e número em
   texto fraco — o plano de entrada inclui zero números de WhatsApp por
   desenho, e abrir a tela de assinatura em vermelho por causa disso assusta
   quem nunca usou o que nunca comprou. */
.uso--nao-incluso .uso-barra,
.uso--nao-incluso .uso-barra__preenchimento { background: transparent; }
.uso--nao-incluso .uso-linha__numeros { color: var(--cor-texto-fraco); font-style: italic; }

.uso-linha__recado {
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.uso--aviso .uso-linha__recado, .uso--cheio .uso-linha__recado { color: var(--cor-texto); }