/* Portal AUTH - Saúde dos sistemas estável v1 */
/* Corrige salto visual após carregamento assíncrono do healthGrid */

/* Mantém o bloco Workspace estável */
body main > section.hero{
  overflow: visible !important;
}

/* Reserva altura final desde o início */
body main > section.hero .hero-suite.hero-health{
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card interno também fica estável */
body main > section.hero .health-card{
  width: 100% !important;
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

/* Título compacto */
body main > section.hero .health-head{
  margin-bottom: 8px !important;
}

body main > section.hero .health-head h3{
  margin: 0 !important;
  font-size: .92rem !important;
  line-height: 1.1 !important;
}

/* Grade compacta para os 3 status caberem sem crescer */
body main > section.hero .health-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  min-height: 88px !important;
}

/* Enquanto carrega, reserva o mesmo espaço dos cards finais */
body main > section.hero .health-item.loading{
  grid-column: 1 / -1 !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
}

/* Cards finais compactos */
body main > section.hero .health-item{
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

body main > section.hero .health-item strong{
  display: block !important;
  font-size: .78rem !important;
  line-height: 1.08 !important;
  max-width: calc(100% - 16px) !important;
}

body main > section.hero .health-item small{
  display: block !important;
  margin-top: 5px !important;
  font-size: .55rem !important;
  line-height: 1.05 !important;
  letter-spacing: .07em !important;
}

body main > section.hero .health-dot{
  width: 9px !important;
  height: 9px !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Em telas médias, usa 2 colunas e reserva altura maior, sem salto */
@media(max-width:1280px){
  body main > section.hero .hero-suite.hero-health{
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  body main > section.hero .health-card{
    height: 186px !important;
    min-height: 186px !important;
    max-height: 186px !important;
  }

  body main > section.hero .health-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 126px !important;
  }

  body main > section.hero .health-item{
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 8px 10px !important;
  }

  body main > section.hero .health-item.loading{
    min-height: 126px !important;
  }
}

/* Mobile não trava altura */
@media(max-width:960px){
  body main > section.hero .hero-suite.hero-health,
  body main > section.hero .health-card{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body main > section.hero .health-grid{
    grid-template-columns: 1fr !important;
  }

  body main > section.hero .health-item{
    max-height: none !important;
  }
}