/* ==========================================================================
   A1 · Painel
   A pergunta da tela é uma só: está tudo funcionando? Alerta só quando há
   problema; números do dia clicáveis; o fluxo das últimas 24 horas; e um
   cartão por domínio.
   ========================================================================== */

.a1__alertas { display: flex; flex-direction: column; gap: 8rem; margin-bottom: 28rem; }

.a1__numeros { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 28rem; }
.tablet .a1__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mobile:not(.tablet) .a1__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.a1__numero { padding: 18rem 20rem; text-align: left; width: 100%; }
.a1__numero:hover { background: var(--panel); }
.a1__numero .num { margin-top: 10rem; font-size: 34rem; }

.a1__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340rem; gap: 16rem; align-items: start; }
.mobile .a1__corpo { grid-template-columns: minmax(0, 1fr); }

.a1__grafico-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16rem;
  margin-bottom: 20rem;
  flex-wrap: wrap;
}
.a1__barras { display: flex; align-items: flex-end; gap: 4rem; height: 110rem; }
.a1__barra { flex: 1; background: var(--line-2); min-width: 2rem; }
.a1__horas {
  display: flex;
  justify-content: space-between;
  margin-top: 10rem;
  font-family: var(--font-mono);
  font-size: 10rem;
  color: var(--ink-3);
}
.a1__legenda {
  display: flex;
  align-items: center;
  gap: 8rem;
  margin-top: 16rem;
  padding-top: 14rem;
  border-top: 1rem solid var(--line);
  font-size: 12rem;
  color: var(--ink-3);
}
.a1__legenda span:first-child { width: 9rem; height: 9rem; background: var(--fail); flex: none; }

.a1__dominios { display: flex; flex-direction: column; gap: 8rem; }
.a1__dominio {
  position: relative;
  border: 1rem solid var(--line);
  background: var(--bg-2);
  padding: 16rem 18rem;
  display: block;
  width: 100%;
  text-align: left;
}
.a1__dominio:hover { background: var(--panel); }
.a1__dominio-topo { display: flex; justify-content: space-between; align-items: center; gap: 10rem; }
.a1__dominio-nome { font-family: var(--font-mono); font-weight: 800; font-size: 13rem; overflow-wrap: anywhere; }
.a1__dominio-dns { display: flex; gap: 3rem; align-items: center; margin-top: 12rem; }
.a1__dominio-dns i { width: 16rem; height: 8rem; box-sizing: border-box; font-style: normal; }
.a1__dominio-dns b {
  margin-left: 8rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10rem;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.a1__dominio-resumo { display: block; font-size: 12rem; color: var(--ink-2); margin-top: 12rem; line-height: 1.5; }