/* ---------- Entrada ---------- */

.entrar {
  display: grid;
  min-height: 100%;
  background: var(--superficie);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.entrar__lado {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--espaco-13) var(--espaco-13) var(--espaco-11);
}

.entrar__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
}

.entrar__marca-simbolo {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-icone);
  background: var(--marca);
  box-shadow: var(--marca-sombra);
  color: var(--superficie);
}

.entrar__marca-nome {
  font-size: var(--texto-15);
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
}

.entrar__caixa {
  display: flex;
  width: 400px;
  max-width: 100%;
  flex-direction: column;
  margin: auto;
  padding: var(--espaco-13) 0;
  gap: var(--espaco-3);
}

.entrar__titulo {
  font-size: var(--texto-28);
}

.entrar__subtitulo {
  margin-bottom: var(--espaco-9);
  color: var(--texto-secundario);
}

.entrar__formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-7);
}

.entrar__formulario .campo__controle,
.entrar__formulario .botao {
  height: 42px;
}

.entrar__nota {
  margin-top: var(--espaco-9);
  color: var(--texto-secundario);
  font-size: var(--texto-13);
}

.entrar__rodape {
  color: var(--texto-suave);
  font-size: var(--texto-12);
}

.entrar__painel {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--espaco-13);
  margin: var(--respiro-moldura);
  overflow: hidden;
  border-radius: var(--raio-folha);
  background: var(--painel-entrar-fundo);
  color: var(--painel-entrar-texto);
}

.entrar__painel-brilho,
.entrar__painel-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.entrar__painel-brilho {
  background: var(--painel-entrar-brilho);
}

.entrar__painel-grade {
  background-image:
    linear-gradient(var(--painel-entrar-borda) 1px, transparent 1px),
    linear-gradient(90deg, var(--painel-entrar-borda) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
  opacity: 0.5;
}

.entrar__painel-conteudo {
  position: relative;
  display: flex;
  width: 480px;
  max-width: 100%;
  flex-direction: column;
  margin: 0 auto;
  gap: var(--espaco-7);
}

.entrar__painel-marca {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--painel-entrar-borda);
  border-radius: var(--raio-cartao);
  background: var(--painel-entrar-vidro);
}

.entrar__painel-selo {
  display: inline-flex;
  height: 28px;
  align-items: center;
  align-self: flex-start;
  padding: 0 var(--espaco-5);
  border: 1px solid var(--painel-entrar-borda);
  border-radius: var(--raio-pilula);
  background: var(--painel-entrar-vidro);
  font-size: var(--texto-12);
  font-weight: var(--peso-semi);
  gap: var(--espaco-2);
}

.entrar__painel-titulo {
  color: var(--painel-entrar-texto);
  font-size: var(--texto-32);
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.entrar__painel-texto {
  color: var(--painel-entrar-texto-suave);
  font-size: var(--texto-15);
  line-height: 1.6;
}

.entrar__destaques {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: var(--espaco-7) 0 0;
  gap: var(--espaco-4);
  list-style: none;
}

.entrar__destaque {
  display: flex;
  align-items: flex-start;
  padding: var(--espaco-6) var(--espaco-7);
  border: 1px solid var(--painel-entrar-borda);
  border-radius: var(--raio-cartao);
  background: var(--painel-entrar-vidro);
  gap: var(--espaco-5);
}

.entrar__destaque-icone {
  display: flex;
  width: 36px;
  height: 36px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--painel-entrar-borda);
  border-radius: var(--raio-icone);
  background: var(--painel-entrar-vidro);
}

.entrar__destaque-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.entrar__destaque-titulo {
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
}

.entrar__destaque-detalhe {
  color: var(--painel-entrar-texto-suave);
  font-size: var(--texto-13);
  line-height: 1.5;
}

@media (max-width: 960px) {
  .entrar {
    grid-template-columns: minmax(0, 1fr);
  }

  .entrar__painel {
    display: none;
  }
}

/* ---------- Visão geral ---------- */

.visao-geral__indicadores {
  display: grid;
  gap: var(--espaco-7);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.visao-geral__corpo {
  display: grid;
  gap: var(--espaco-7);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

@media (max-width: 1180px) {
  .visao-geral__indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visao-geral__corpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.eventos {
  padding: 0;
  margin: 0;
  list-style: none;
}

.evento {
  display: grid;
  align-items: center;
  padding: var(--espaco-4) var(--espaco-9);
  border-bottom: 1px solid var(--divisor-linha);
  font-size: var(--texto-13);
  gap: var(--espaco-5);
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

.evento:last-child {
  border-bottom: none;
}

.evento__ponto {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--ornamento);
}

.evento__ponto--backoffice {
  background: var(--marca);
}

.evento__ponto--coletor {
  background: var(--sucesso);
}

.evento__ponto--painel {
  background: var(--atencao);
}

.evento__ponto--integracao {
  background: var(--erro);
}

.evento__texto {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.evento__acao {
  overflow: hidden;
  color: var(--texto);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evento__detalhe {
  overflow: hidden;
  color: var(--texto-secundario);
  font-size: var(--texto-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evento__hora {
  color: var(--texto-secundario);
  font-size: var(--texto-12);
  white-space: nowrap;
}

/* ---------- Auditoria ---------- */

.dados-json {
  max-width: 360px;
  overflow: hidden;
  color: var(--texto-secundario);
  font-family: var(--fonte-mono);
  font-size: var(--texto-11);
  text-overflow: ellipsis;
}

/* ---------- Formulários nos painéis ---------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-7);
}

.formulario__erro {
  padding: var(--espaco-5) var(--espaco-7);
  border: 1px solid var(--erro-borda);
  border-radius: var(--raio-cartao);
  background: var(--erro-suave);
  color: var(--erro-texto);
  font-size: var(--texto-13);
  font-weight: var(--peso-medio);
}

.formulario__erro:empty {
  display: none;
}

.destaque-tenant {
  display: flex;
  flex-direction: column;
  padding: var(--espaco-5) var(--espaco-6);
  border: 1px solid var(--marca-borda);
  border-radius: var(--raio-controle);
  background: var(--marca-suave);
  color: var(--marca-texto);
  font-size: var(--texto-13);
  gap: 2px;
}

.destaque-tenant__nome {
  font-weight: var(--peso-semi);
}