/* ==========================================================================
   Peça · faixa de alerta
   Só aparece quando existe problema de verdade. Uma frase que diz o que
   aconteceu, uma que diz a consequência, e um botão.
   No máximo uma faixa âmbar por tela — as outras ficam com botão de contorno.
   ========================================================================== */

.faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rem 16rem;
  padding: 14rem 18rem;
  border: 1rem solid var(--line);
  background: var(--bg-2);
}
.faixa + .faixa { margin-top: 8rem; }

.faixa--fail { border-color: var(--fail); background: var(--veu-fail); }
.faixa--warn { border-color: var(--warn); background: var(--veu-warn); }
.faixa--ok { border-color: var(--line); background: var(--bg-2); }

.faixa__glifo {
  font-family: var(--font-mono);
  font-size: 16rem;
  line-height: 1;
  width: 16rem;
  flex: none;
  text-align: center;
}
.faixa__hachura {
  width: 16rem;
  height: 16rem;
  flex: none;
  background: var(--hachura);
}
.faixa__texto { flex: 1 1 260rem; min-width: 0; overflow-wrap: anywhere; }
.faixa__titulo { font-size: 14rem; font-weight: 600; }
.faixa__consequencia { font-size: 13rem; color: var(--ink-2); margin-top: 3rem; line-height: 1.5; }
.faixa__consequencia strong {
  font-family: var(--font-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.faixa .btn { flex: none; }

/* Faixa larga, com o corpo em bloco — usada na ficha da conta e no detalhe */
.faixa--alta { align-items: flex-start; padding: 18rem 20rem; }
.faixa--alta .faixa__glifo,
.faixa--alta .faixa__hachura { margin-top: 2rem; width: 18rem; height: 18rem; }
.faixa--alta .faixa__titulo { font-size: 15rem; }
.faixa--alta .faixa__consequencia { font-size: 13rem; margin-top: 5rem; max-width: 760rem; }
.faixa--alta .btn { align-self: center; }