/*
  MH UI — estilo comum das dashboards (partilhado)

  Fonte: Portal-MH/partilhado/mh-ui.css — cada dashboard tem uma cópia em
  css/mh-ui.css (copiar sempre a partir daqui). Carregar ANTES da folha de
  tema da dashboard (tema-portal.css), que liga as classes antigas a estes
  valores.

  Regras do estilo (iguais ao Portal MH):
    fundo            #0b0d14
    painel           #0f121b, contorno rgba(255,255,255,.06), raio 18px
    mosaico          #131726, contorno rgba(255,255,255,.05), raio 14px
    título pequeno   11px, 700, maiúsculas, .09em, ciano #67e8f9
    título de painel 17px, 700
    título de página 22px, 700
    texto secundário #8b93a7
    botão            contorno rgba(255,255,255,.12), raio 10px, 13px 600
    botão principal  degradê #0891b2 → #a21caf, texto branco
    separador activo fundo ciano 8%, contorno ciano 28%, texto #67e8f9
    estados          ok #34d399 · aviso #f59e0b · erro #fb7185 · info #60a5fa
    letra            Plus Jakarta Sans
*/

:root {
  --mh-fundo: #0b0d14;
  --mh-painel: #0f121b;
  --mh-mosaico: #131726;
  --mh-campo: #141824;
  --mh-linha: rgba(255, 255, 255, .06);
  --mh-linha-forte: rgba(255, 255, 255, .12);
  --mh-texto: #e6e9f2;
  --mh-texto-2: #c3c9d8;
  --mh-suave: #a1a8ba;
  --mh-mudo: #8b93a7;
  --mh-seccao: #7d859a;
  --mh-ciano: #22d3ee;
  --mh-ciano-claro: #67e8f9;
  --mh-magenta: #d946ef;
  --mh-ok: #34d399;
  --mh-aviso: #f59e0b;
  --mh-erro: #fb7185;
  --mh-info: #60a5fa;
  --mh-degrade: linear-gradient(90deg, #22d3ee, #d946ef);
  --mh-degrade-botao: linear-gradient(90deg, #0891b2, #a21caf);
  --mh-sombra: 0 0 0 1px rgba(255, 255, 255, .02), 0 10px 40px rgba(0, 0, 0, .35);
  --mh-letra: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Pontos de estado (substituem os emojis 🟢 🟡 🔴 …; ver js/mh-ui.js) */
.mh-ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  flex: none;
  background: var(--mh-mudo);
}
.mh-ponto-ok     { background: var(--mh-ok);     box-shadow: 0 0 8px rgba(52, 211, 153, .6); }
.mh-ponto-aviso  { background: var(--mh-aviso);  box-shadow: 0 0 8px rgba(245, 158, 11, .6); }
.mh-ponto-erro   { background: var(--mh-erro);   box-shadow: 0 0 8px rgba(251, 113, 133, .6); }
.mh-ponto-info   { background: var(--mh-info);   box-shadow: 0 0 8px rgba(96, 165, 250, .6); }
.mh-ponto-neutro { background: var(--mh-mudo); }
.mh-ponto-fim    { margin: 0 0 0 6px; }

/* Componentes base (para ecrãs novos; os antigos ligam-se no tema) */
.mh-painel {
  padding: 20px;
  border: 1px solid var(--mh-linha);
  border-radius: 18px;
  background: var(--mh-painel);
  box-shadow: var(--mh-sombra);
}
.mh-mosaico {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 14px;
  background: var(--mh-mosaico);
}
.mh-kicker {
  color: var(--mh-ciano-claro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mh-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--mh-linha-forte);
  border-radius: 10px;
  background: transparent;
  color: var(--mh-texto);
  font: 600 13px/1 var(--mh-letra);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mh-botao:hover { background: rgba(255, 255, 255, .05); border-color: rgba(34, 211, 238, .35); }
.mh-botao-principal { border: 0; color: #fff; background: var(--mh-degrade-botao); font-weight: 700; }