html, body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at top left, rgba(226, 232, 240, 0.9), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Mesma assinatura visual do mapa de sala: a marca d'água no canto do cartão. */
.brand-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.brand-shell::after {
  content: "";
  position: absolute;
  inset: auto -24px -28px auto;
  width: 124px;
  height: 124px;
  background: linear-gradient(145deg, rgba(248, 113, 113, 0.14), rgba(252, 211, 77, 0.10));
  clip-path: polygon(0 78%, 38% 78%, 53% 100%, 86% 28%, 63% 28%, 100% 0, 74% 0, 38% 21%, 0 44%, 25% 54%, 0 78%);
  pointer-events: none;
  z-index: 0;
}

.brand-shell > * {
  position: relative;
  z-index: 1;
}

.sistema-card {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.sistema-card:hover {
  transform: translateY(-2px);
  border-color: #94a3b8;
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .35);
}

.sistema-card.indisponivel {
  opacity: .55;
}

.sistema-card.indisponivel:hover {
  transform: none;
  box-shadow: none;
  border-color: #e2e8f0;
}