/* ==========================================================================
   RHello - Pagina de status dos ambientes
   Estilos proprios da pagina. Nao altera nenhum arquivo do tema Mobirise.
   ========================================================================== */

.rh-status {
  /* Marca RHello */
  --rh-azul:        #0095db;
  --rh-azul-escuro: #005a84;
  --rh-preto:       #232323;

  /* Superficies e tinta */
  --rh-superficie:  #ffffff;
  --rh-plano:       #f7f8fa;
  --rh-tinta:       #232323;
  --rh-tinta-2:     #52514e;
  --rh-tinta-3:     #7a7a7a;
  --rh-linha:       #e4e6ea;
  --rh-linha-forte: #cfd3d9;

  /* Paleta de status (validada; nunca usada para identidade/serie) */
  --rh-bom:         #0ca30c;
  --rh-atencao:     #fab219;
  --rh-grave:       #ec835a;
  --rh-critico:     #d03b3b;
  --rh-neutro:      #c3c8d0;

  /* Cor da serie do mini-grafico (identidade, nao status) */
  --rh-serie:       #0095db;

  color: var(--rh-tinta);
  background-color: var(--rh-plano);
  padding-top: 7rem;
  padding-bottom: 4rem;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.rh-status *,
.rh-status *::before,
.rh-status *::after { box-sizing: border-box; }

/* ---------- Banner geral ------------------------------------------------ */

.rh-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  background: var(--rh-superficie);
  border: 1px solid var(--rh-linha);
  border-left: 6px solid var(--rh-neutro);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.rh-banner[data-status="operational"] { border-left-color: var(--rh-bom); }
.rh-banner[data-status="degraded"]    { border-left-color: var(--rh-atencao); }
.rh-banner[data-status="down"]        { border-left-color: var(--rh-critico); }
.rh-banner[data-status="maintenance"] { border-left-color: var(--rh-azul); }
.rh-banner[data-status="unknown"]     { border-left-color: var(--rh-neutro); }

.rh-banner__icone {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: #ffffff;
  background: var(--rh-neutro);
}
.rh-banner[data-status="operational"] .rh-banner__icone { background: var(--rh-bom); }
.rh-banner[data-status="degraded"]    .rh-banner__icone { background: var(--rh-atencao); color: #4a3300; }
.rh-banner[data-status="down"]        .rh-banner__icone { background: var(--rh-critico); }
.rh-banner[data-status="maintenance"] .rh-banner__icone { background: var(--rh-azul); }

.rh-banner__texto { flex: 1 1 18rem; min-width: 0; }
.rh-banner__titulo {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .25rem;
}
.rh-banner__meta {
  margin: 0;
  font-size: .95rem;
  color: var(--rh-tinta-2);
}
.rh-banner__acoes {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.rh-btn {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--rh-azul-escuro);
  background: var(--rh-superficie);
  border: 2px solid var(--rh-azul-escuro);
  border-radius: 8px;
  padding: .45rem .95rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rh-btn:hover,
.rh-btn:focus-visible { background: var(--rh-azul-escuro); color: #ffffff; }
.rh-btn[aria-pressed="true"] { background: var(--rh-azul-escuro); color: #ffffff; }

/* ---------- Avisos ------------------------------------------------------ */

.rh-aviso {
  border: 1px solid var(--rh-linha);
  border-left: 6px solid var(--rh-atencao);
  background: #fff9e8;
  border-radius: 10px;
  padding: .9rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: .95rem;
  color: var(--rh-tinta-2);
}
.rh-aviso strong { color: var(--rh-tinta); }

/* ---------- Legenda ----------------------------------------------------- */

.rh-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 1.75rem;
  font-size: .875rem;
  color: var(--rh-tinta-2);
}
.rh-legenda__item { display: inline-flex; align-items: center; gap: .45rem; }
.rh-legenda__marca {
  width: .9rem;
  height: .9rem;
  border-radius: 3px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(35, 35, 35, .12);
}
.rh-legenda__marca--operational { background: var(--rh-bom); }
.rh-legenda__marca--degraded    { background: var(--rh-atencao); }
.rh-legenda__marca--down        { background: var(--rh-critico); }
.rh-legenda__marca--maintenance { background: var(--rh-azul); }
.rh-legenda__marca--unknown     { background: var(--rh-neutro); }

/* ---------- Incidentes ativos ------------------------------------------- */

.rh-incidentes {
  background: var(--rh-superficie);
  border: 1px solid var(--rh-linha);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}
.rh-incidentes h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .85rem;
}
.rh-incidentes ul { list-style: none; margin: 0; padding: 0; }
.rh-incidentes li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  align-items: baseline;
  padding: .65rem 0;
  border-top: 1px solid var(--rh-linha);
  font-size: .95rem;
}
.rh-incidentes li:first-child { border-top: 0; }
.rh-incidentes__ambiente { font-weight: 700; }
.rh-incidentes__quando { color: var(--rh-tinta-3); font-size: .85rem; }

.rh-sev {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 4px;
  color: var(--rh-tinta);
  background: #eceef1;
  white-space: nowrap;
}
.rh-sev[data-sev="5"],
.rh-sev[data-sev="4"] { background: #fbe4e4; color: #8f1f1f; }
.rh-sev[data-sev="3"] { background: #fdeadf; color: #8a3d17; }
.rh-sev[data-sev="2"] { background: #fdf3d9; color: #6b4a00; }

/* ---------- Cards de ambiente ------------------------------------------- */

.rh-grupo { margin-bottom: 2.5rem; }
.rh-grupo__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rh-tinta-3);
  margin: 0 0 .9rem;
}

.rh-card {
  background: var(--rh-superficie);
  border: 1px solid var(--rh-linha);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
}

.rh-card__topo {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.rh-card__nome {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.rh-card__descricao {
  margin: .2rem 0 0;
  font-size: .9rem;
  color: var(--rh-tinta-3);
}

.rh-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: #eceef1;
  color: var(--rh-tinta);
  white-space: nowrap;
}
.rh-pill__ponto {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--rh-neutro);
  flex: 0 0 auto;
}
.rh-pill[data-status="operational"] { background: #e6f6e6; }
.rh-pill[data-status="operational"] .rh-pill__ponto { background: var(--rh-bom); }
.rh-pill[data-status="degraded"] { background: #fdf3d9; }
.rh-pill[data-status="degraded"] .rh-pill__ponto { background: var(--rh-atencao); }
.rh-pill[data-status="down"] { background: #fbe4e4; }
.rh-pill[data-status="down"] .rh-pill__ponto { background: var(--rh-critico); }
.rh-pill[data-status="maintenance"] { background: #e2f2fb; }
.rh-pill[data-status="maintenance"] .rh-pill__ponto { background: var(--rh-azul); }

/* ---------- Metricas ---------------------------------------------------- */

.rh-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1.35rem;
}
.rh-metrica__rotulo {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rh-tinta-3);
  margin-bottom: .2rem;
}
.rh-metrica__valor {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--rh-tinta);
}
.rh-metrica__valor small {
  font-size: .8rem;
  font-weight: 600;
  color: var(--rh-tinta-3);
  margin-left: .15rem;
}
.rh-metrica__nota {
  display: block;
  font-size: .78rem;
  color: var(--rh-tinta-3);
  margin-top: .1rem;
}

/* ---------- Faixa de uptime (90 dias) ----------------------------------- */

.rh-uptime__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .78rem;
  color: var(--rh-tinta-3);
  margin-bottom: .35rem;
}
.rh-faixa {
  display: flex;
  align-items: stretch;
  gap: 2px;               /* separador de 2px entre marcas */
  height: 2.6rem;
  width: 100%;
}
.rh-faixa__barra {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--rh-neutro);
  transition: transform .1s ease, filter .1s ease;
  cursor: default;
}
.rh-faixa__barra[data-status="operational"] { background: var(--rh-bom); }
.rh-faixa__barra[data-status="degraded"]    { background: var(--rh-atencao); }
.rh-faixa__barra[data-status="down"]        { background: var(--rh-critico); }
.rh-faixa__barra[data-status="maintenance"] { background: var(--rh-azul); }
.rh-faixa__barra[data-status="unknown"]     { background: var(--rh-neutro); }
.rh-faixa__barra:hover,
.rh-faixa__barra:focus-visible {
  filter: brightness(.86);
  outline: 2px solid var(--rh-preto);
  outline-offset: 1px;
}

/* ---------- Mini-grafico de tempo de resposta --------------------------- */

.rh-spark { margin-top: 1.25rem; }
.rh-spark__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .78rem;
  color: var(--rh-tinta-3);
  margin-bottom: .3rem;
}
.rh-spark__svg {
  display: block;
  width: 100%;
  height: 4.5rem;
  overflow: visible;
}
.rh-spark__area  { fill: var(--rh-serie); opacity: .12; }
.rh-spark__linha { fill: none; stroke: var(--rh-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rh-spark__base  { stroke: var(--rh-linha-forte); stroke-width: 1; }
.rh-spark__mira  { stroke: var(--rh-tinta-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.rh-spark__ponto { fill: var(--rh-serie); stroke: var(--rh-superficie); stroke-width: 2; opacity: 0; }
.rh-spark.is-ativo .rh-spark__mira,
.rh-spark.is-ativo .rh-spark__ponto { opacity: 1; }
.rh-spark__vazio {
  font-size: .85rem;
  color: var(--rh-tinta-3);
  padding: 1rem 0;
  margin: 0;
}

/* ---------- Tooltip ----------------------------------------------------- */

.rh-tooltip {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  background: var(--rh-preto);
  color: #ffffff;
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .8rem;
  line-height: 1.45;
  max-width: 16rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-10px);
  transition: opacity .12s ease;
}
.rh-tooltip.is-visivel { opacity: 1; }
.rh-tooltip strong { display: block; font-size: .85rem; margin-bottom: .15rem; }
.rh-tooltip span { display: block; color: #d7dade; }

/* ---------- Tabela acessivel -------------------------------------------- */

.rh-tabela-wrap {
  background: var(--rh-superficie);
  border: 1px solid var(--rh-linha);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}
.rh-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rh-tabela caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding-bottom: .75rem;
  color: var(--rh-tinta);
}
.rh-tabela th,
.rh-tabela td {
  text-align: left;
  padding: .5rem .45rem;
  border-bottom: 1px solid var(--rh-linha);
  font-variant-numeric: tabular-nums;
}
.rh-tabela th { font-weight: 700; color: var(--rh-tinta-2); white-space: nowrap; }
.rh-tabela tbody tr:last-child td { border-bottom: 0; }

/* ---------- Rodape da secao --------------------------------------------- */

.rh-nota {
  font-size: .85rem;
  color: var(--rh-tinta-3);
  margin: 0;
  line-height: 1.6;
}

.rh-carregando {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--rh-tinta-3);
}

.rh-oculto { display: none !important; }

/* Alternancia de rotulos entre desktop e telas estreitas */
.rh-so-mobile { display: none; }
.rh-so-desktop { display: inline; }

.rh-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsivo -------------------------------------------------- */

@media (max-width: 767px) {
  .rh-status { padding-top: 5.5rem; }
  .rh-banner { padding: 1.15rem 1.15rem; }
  .rh-banner__titulo { font-size: 1.3rem; }
  .rh-card { padding: 1.15rem 1.15rem; }
  .rh-faixa { height: 2.1rem; gap: 1px; }
  /* Em telas estreitas mostramos os ultimos 30 dias para as barras nao sumirem */
  .rh-faixa__barra[data-fora-mobile="1"] { display: none; }
  .rh-metrica__valor { font-size: 1.25rem; }
  /* Duas colunas de metricas: o card nao vira uma coluna infinita */
  .rh-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
  .rh-so-mobile { display: inline; }
  .rh-so-desktop { display: none; }
  .rh-uptime__cabecalho,
  .rh-spark__cabecalho { font-size: .72rem; gap: .5rem; }
  .rh-banner__acoes { width: 100%; }
  .rh-banner__acoes .rh-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-faixa__barra,
  .rh-tooltip,
  .rh-btn { transition: none; }
}

@media print {
  .rh-banner__acoes, .rh-tooltip { display: none !important; }
  .rh-status { padding-top: 1rem; background: #ffffff; }
}