/* Página pública de status — tema claro, único.
   Sem framework e sem fonte externa: o cliente pode estar acessando justamente
   porque a rede está ruim. */

:root {
  --bg: #ffffff;
  --bg-sutil: #fafafa;
  --borda: #e6e6e3;
  --texto: #1b1b19;
  --texto-fraco: #5c5c57;
  --texto-fraco2: #8c8c85;

  --ok: #1f8a4c;
  --degradado: #b57d10;
  --instavel: #cc6520;
  --queda: #c33a3a;
  --manutencao: #35619e;
  --vazio: #ececea;

  --raio: 3px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.hidden {
  display: none !important;
}

/* ---- Topo ---- */
.topo {
  border-bottom: 1px solid var(--borda);
}

.topo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.marca-nome {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.marca-sub {
  color: var(--texto-fraco);
  font-size: 14px;
}

.atualizacao {
  color: var(--texto-fraco2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.atualizacao.aviso {
  color: var(--degradado);
}

/* ---- Banner geral ----
   Barra chapada com filete colorido à esquerda. Sem sombra, sem pulso: a cor e
   o texto já dizem o que precisa ser dito. */
.banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-fraco2);
  border-radius: var(--raio);
  background: var(--bg-sutil);
}

.banner.g-operacional {
  border-left-color: var(--ok);
}
.banner.g-degradado {
  border-left-color: var(--degradado);
}
.banner.g-parcial {
  border-left-color: var(--instavel);
}
.banner.g-interrompido {
  border-left-color: var(--queda);
}
.banner.g-manutencao {
  border-left-color: var(--manutencao);
}

.banner-icone {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
  top: -1px;
  background: var(--texto-fraco2);
}

.banner.g-operacional .banner-icone {
  background: var(--ok);
}
.banner.g-degradado .banner-icone {
  background: var(--degradado);
}
.banner.g-parcial .banner-icone {
  background: var(--instavel);
}
.banner.g-interrompido .banner-icone {
  background: var(--queda);
}
.banner.g-manutencao .banner-icone {
  background: var(--manutencao);
}

.banner-texto h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.banner-texto p {
  margin: 3px 0 0;
  color: var(--texto-fraco);
  font-size: 13px;
}

/* ---- Avisos ---- */
#avisos-secao {
  margin: 14px 0 0;
}

.aviso-cartao {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-fraco2);
  border-radius: var(--raio);
  padding: 15px 18px;
  margin-bottom: 10px;
}

.aviso-cartao.t-investigando,
.aviso-cartao.t-identificado {
  border-left-color: var(--queda);
}
.aviso-cartao.t-monitorando {
  border-left-color: var(--degradado);
}
.aviso-cartao.t-manutencao {
  border-left-color: var(--manutencao);
}

.aviso-topo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.etiqueta {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco2);
  white-space: nowrap;
}

.t-investigando .etiqueta,
.t-identificado .etiqueta {
  color: var(--queda);
}
.t-monitorando .etiqueta {
  color: var(--degradado);
}
.t-manutencao .etiqueta {
  color: var(--manutencao);
}

/* Mesmo motivo do .hist-titulo: encolhe em vez de empurrar a etiqueta sozinha
   para uma linha. */
.aviso-titulo {
  font-weight: 600;
  font-size: 15px;
  flex: 1 1 auto;
  min-width: 0;
}

.aviso-mensagem {
  margin: 0;
  color: var(--texto-fraco);
  font-size: 14px;
}

.aviso-meta {
  margin-top: 7px;
  font-size: 12px;
  color: var(--texto-fraco2);
}

.aviso-atualizacoes {
  margin: 12px 0 0;
  padding: 11px 0 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}

.aviso-atualizacoes li {
  font-size: 13.5px;
  color: var(--texto-fraco);
  margin-bottom: 8px;
}

.aviso-atualizacoes li:last-child {
  margin-bottom: 0;
}

.aviso-atualizacoes time {
  display: block;
  color: var(--texto-fraco2);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---- Seções ---- */
.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 38px 0 10px;
}

.secao-cabecalho h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-fraco);
}

.legenda-periodo {
  color: var(--texto-fraco2);
  font-size: 12px;
}

/* Divisórias em vez de cartão flutuante. */
.cartao {
  border-top: 1px solid var(--borda);
}

.vazio {
  padding: 20px 0;
  color: var(--texto-fraco2);
  font-size: 14px;
}

/* ---- Componente ---- */
.componente {
  padding: 15px 0;
  border-bottom: 1px solid var(--borda);
}

.comp-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.comp-nome {
  font-weight: 600;
  font-size: 14.5px;
}

.comp-descricao {
  color: var(--texto-fraco2);
  font-size: 12.5px;
  margin-top: 1px;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--texto-fraco);
}

.pilula::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-fraco2);
}

.pilula.e-operacional {
  color: var(--texto-fraco);
}
.pilula.e-operacional::before {
  background: var(--ok);
}
.pilula.e-degradado {
  color: var(--degradado);
}
.pilula.e-degradado::before {
  background: var(--degradado);
}
.pilula.e-parcial {
  color: var(--instavel);
}
.pilula.e-parcial::before {
  background: var(--instavel);
}
.pilula.e-interrompido {
  color: var(--queda);
}
.pilula.e-interrompido::before {
  background: var(--queda);
}
.pilula.e-manutencao {
  color: var(--manutencao);
}
.pilula.e-manutencao::before {
  background: var(--manutencao);
}

/* ---- Barras de 90 dias ---- */
.barras {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 26px;
  margin: 13px 0 7px;
}

.barra {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--vazio);
}

.barra:hover {
  opacity: 0.7;
}

.barra.estado-ok {
  background: var(--ok);
}
.barra.estado-degradado {
  background: var(--degradado);
}
.barra.estado-instavel {
  background: var(--instavel);
}
.barra.estado-queda {
  background: var(--queda);
}
.barra.estado-sem-dados {
  background: var(--vazio);
}

.barras-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--texto-fraco2);
  font-variant-numeric: tabular-nums;
}

.barras-rodape .traco {
  flex: 1;
  height: 1px;
  background: var(--borda);
}

/* Em telas estreitas 90 barras viram poeira: esconde as mais antigas.
   O rótulo do período é corrigido pelo JS (ver `diasVisiveis`). */
@media (max-width: 700px) {
  .barra:nth-child(-n + 30) {
    display: none;
  }
}

@media (max-width: 460px) {
  .barra:nth-child(-n + 60) {
    display: none;
  }
}

/* ---- Legenda ---- */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--texto-fraco2);
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.amostra {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  display: inline-block;
}

.amostra.estado-ok {
  background: var(--ok);
}
.amostra.estado-degradado {
  background: var(--degradado);
}
.amostra.estado-instavel {
  background: var(--instavel);
}
.amostra.estado-queda {
  background: var(--queda);
}
.amostra.estado-sem-dados {
  background: var(--vazio);
}

/* ---- Histórico ---- */
.hist-grupo {
  margin-bottom: 22px;
}

.hist-mes {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco2);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 13px;
}

.hist-item {
  padding-bottom: 15px;
}

.hist-topo {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

/* Sem isto o título longo não cabe ao lado do marcador e o flex joga o texto
   inteiro para a linha de baixo, deixando a bolinha órfã (visível no mobile).
   Encolhendo o título, ele quebra dentro da própria coluna. */
.hist-titulo {
  font-weight: 600;
  font-size: 14.5px;
  flex: 1;
  min-width: 0;
}

.hist-meta {
  font-size: 12px;
  color: var(--texto-fraco2);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.hist-mensagem {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--texto-fraco);
}

.marcador {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--texto-fraco2);
}

.marcador.s-interrompido {
  background: var(--queda);
}
.marcador.s-parcial {
  background: var(--instavel);
}
.marcador.s-manutencao {
  background: var(--manutencao);
}

/* ---- Dica (tooltip) ---- */
.dica {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--texto);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: var(--raio);
  white-space: nowrap;
}

.dica.visivel {
  opacity: 1;
}

.dica b {
  display: block;
  font-weight: 600;
}

/* ---- Rodapé ---- */
.rodape {
  margin-top: 40px;
  padding: 20px 0 40px;
  border-top: 1px solid var(--borda);
}

.rodape p {
  margin: 0;
  color: var(--texto-fraco2);
  font-size: 12px;
}