/* Status ROQT — CSS único, sem build e sem dependência.
   Mobile-first: o estado base é o telefone, media query só amplia.
   Estado nunca é comunicado por cor sozinha: sempre cor + glifo + texto. */

:root {
  /* Tema claro fixo, não `light dark`: durante uma queda, duas pessoas olhando a
     mesma página têm de ver a mesma tela — inclusive impressa e em print de chamado.
     As cores abaixo são auditadas em AA sobre este fundo; tema escuro exige
     reauditar todas. */
  color-scheme: light;
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --borda: #e3e6ea;
  --texto: #16191d;
  --texto-fraco: #5b636d;
  --ok: #15803d;
  --alerta: #b45309;
  --alerta-fundo: #fdf3e3;
  --parcial: #c2410c;
  --erro: #b91c1c;
  --erro-fundo: #fdecec;
  --info: #1d4ed8;
  --info-fundo: #eaf0fe;
  /* #6b7280 dava 4,32:1 sobre o fundo do selo — abaixo do mínimo AA de 4,5. */
  --neutro: #5f6673;
  --neutro-fundo: #f1f2f4;

  /* Só para as células da faixa, e separada da cor de texto de propósito: texto
     exige 4,5:1, componente de UI exige 3:1. Este verde dá 3,67:1 sobre o branco
     do cartão — leve o bastante para 90 células seguidas não virarem um bloco.
     Os outros estados usam a cor forte: ali o destaque é o objetivo. */
  --dia-ok: #1a9950;

  --raio: 12px;
  /* Sombra em vez de contorno pesado nos cartões de disponibilidade — não muda
     nenhuma cor de texto, então não reabre a auditoria de AA. */
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px -12px rgba(15, 23, 42, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- home: viewport travada, um painel de rolagem ----
   O cabeçalho fica parado; o que varia de tamanho rola dentro de `.painel`.
   Um scroller só: teto de altura por seção cria níveis de rolagem aninhados e
   corta cartão no meio. Classe exclusiva da home — o histórico rola normal. */
body.pagina-status {
  height: 100vh;
  padding-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Sem `width`, o `max-width` da página não vale aqui: margem auto no eixo
   transversal cancela o stretch do flex (spec §9.4) e o filho encolhe até o
   conteúdo. */
body.pagina-status > .topo,
body.pagina-status > main,
body.pagina-status > .rodape { width: 100%; }
body.pagina-status main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;   /* válvula: só rola se nem o banner couber */
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
body.pagina-status main::-webkit-scrollbar { display: none; }

/* O piso impede o flex de esmagar o painel até zero — sem ele o conteúdo "cabe"
   e nada rola, nem aqui nem no <main>. Barra oculta; a rolagem continua. */
body.pagina-status .painel {
  flex: 1 1 auto;
  min-height: 10rem;
  overflow-y: auto;
  scrollbar-width: none;
}
body.pagina-status .painel::-webkit-scrollbar { display: none; }
body.pagina-status .painel > .secao:first-child { margin-top: 0; }
/* Cada pixel vertical daqui sai da lista de incidentes. */
body.pagina-status .rodape {
  flex: 0 0 auto;
  margin-top: 0.75rem;
  padding: 0.6rem 0 0.5rem;
}
body.pagina-status .rodape__fino { margin-top: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 1rem; top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--superficie);
  border: 2px solid var(--texto);
  border-radius: 8px;
}

/* O mesmo valor nas duas páginas — é o que as mantém do mesmo tamanho. Largo o
   bastante para a faixa de 90 dias, sem ir de ponta a ponta da tela. */
.topo, main, .rodape { max-width: 80rem; margin: 0 auto; }

.topo { padding: 2rem 0 1.25rem; }
.topo__marca {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--texto-fraco);
}
.topo__titulo { margin: 0.25rem 0 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }

/* ---- cores por estado, num lugar só ----
   Os cinco estados da referência (status.bling.com.br) mais o nosso `sem_dado`.
   Cada bloco abaixo só aponta para estas variáveis. */

.selo--operacional, .cartao--operacional,
.componente--operacional, .registro--operacional { --cor: var(--ok); }
.selo--degradado, .cartao--degradado,
.componente--degradado, .registro--degradado { --cor: var(--alerta); }
.selo--parcial, .cartao--parcial,
.componente--parcial, .registro--parcial { --cor: var(--parcial); }
.selo--total, .cartao--total,
.componente--total, .registro--total { --cor: var(--erro); }
.selo--manutencao, .cartao--manutencao,
.componente--manutencao, .registro--manutencao { --cor: var(--info); }
.selo--sem_dado, .cartao--sem_dado,
.componente--sem_dado, .registro--sem_dado { --cor: var(--neutro); }

/* ---- incidente em andamento ----
   Formato da referência: cabeçalho com início, última atualização e duração corrente,
   depois o título, o texto e os serviços afetados. */

.secao--abertos { margin-top: 0; }

/* Borda neutra e a cor só na marca lateral, igual aos cartões de sistema. */
.aberto {
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor, var(--neutro));
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.aberto--degradado { --cor: var(--alerta); }
.aberto--parcial { --cor: var(--parcial); }
.aberto--total { --cor: var(--erro); }
.aberto--manutencao { --cor: var(--info); }

.aberto__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--borda);
  font-size: 0.82rem;
  color: var(--texto-fraco);
}
.aberto__cabeca b { color: var(--texto); font-weight: 600; }
.aberto__titulo {
  margin: 0.85rem 0 0;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--cor, var(--texto));
}
.aberto__glifo { margin-right: 0.25rem; }
.aberto__corpo { margin-top: 0.5rem; font-size: 0.94rem; }
.aberto__corpo p { margin: 0 0 0.6rem; }
.aberto__corpo p:last-child { margin-bottom: 0; }

.afetados { margin-top: 0.9rem; font-size: 0.82rem; }
.afetados__rotulo { display: block; margin-bottom: 0.3rem; color: var(--texto-fraco); }
.afetado { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.afetado__ficha {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--neutro-fundo);
  color: var(--texto-fraco);
}

/* ---- legenda de estados, no cabeçalho da home ---- */

.legenda-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 1rem 0 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--borda);
  list-style: none;
  font-size: 0.8rem;
}
.legenda-estado { color: var(--cor, var(--neutro)); }
.legenda-estado--operacional { --cor: var(--ok); }
.legenda-estado--degradado { --cor: var(--alerta); }
.legenda-estado--parcial { --cor: var(--parcial); }
.legenda-estado--total { --cor: var(--erro); }
.legenda-estado--manutencao { --cor: var(--info); }
.legenda-estado--sem_dado { --cor: var(--neutro); }

/* ---- aviso de dado atrasado ---- */

.aviso {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--alerta);
  border-radius: var(--raio);
  background: var(--alerta-fundo);
  color: var(--texto);
  font-size: 0.9rem;
}
.aviso p { margin: 0; }
.aviso p + p { margin-top: 0.5rem; }

/* ---- seções ---- */

/* Maior que o gap entre cartões (2rem): é o que separa uma seção da outra. */
.secao { width: 100%; margin-top: 3rem; }
.secao__titulo {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.vazio {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-fraco);
  font-size: 0.9rem;
}

/* ---- cartões de sistema ---- */

.cartoes { display: grid; gap: 2rem; }

.cartao {
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
/* Cor só quando há o que anunciar: marcar todo cartão o tempo todo gasta o
   destaque no dia em que nada aconteceu. */
.cartao--degradado,
.cartao--parcial,
.cartao--total,
.cartao--manutencao,
.cartao--sem_dado { border-left: 3px solid var(--cor); }

.cartao__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.cartao__nome { margin: 0; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; }
.cartao__detalhe { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--texto-fraco); }
.cartao__aviso { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--alerta); }
.cartao__manutencao { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--info); }

/* Cor, glifo e texto bastam; cápsula colorida disputa atenção com o nome. */
.selo {
  flex: 0 0 auto;
  color: var(--cor, var(--neutro));
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* ---- árvore de componentes ----
   Vem de alvos.json, não do payload: durante indisponibilidade total não há payload,
   e a árvore não pode desaparecer justamente quando alguém está olhando. */

.componentes {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--borda);
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.componente {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9rem;
}
/* Sem divisória por item: peso de tabela para uma lista de três linhas. */
.componente__nome { color: var(--texto-fraco); }
.componente__estado { color: var(--cor, var(--neutro)); font-weight: 500; white-space: nowrap; }

/* ---- faixas de disponibilidade ----
   Uma célula por dia, HTML e CSS, sem JavaScript. Cada célula leva `title` com o número
   do dia; dia com incidente é link para o registro. Script que pode quebrar sozinho é
   passivo justamente nesta página. */

.grupos { display: grid; gap: 2rem; }

.grupo {
  padding: 1.5rem;
  /* Sombra em vez de contorno: não mexe em cor de texto, não reabre a auditoria AA. */
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.grupo__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.grupo__nome { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.grupo__numeros { margin: 0; font-size: 0.85rem; color: var(--texto-fraco); }
.grupo__numeros strong {
  color: var(--texto);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.faixa + .faixa { margin-top: 0.6rem; }
.faixa--sistema { padding-bottom: 0.6rem; border-bottom: 1px solid var(--borda); }

/* O respiro entre as células é o que faz a faixa ler como série de dias, e não
   como um bloco de cor. */
.faixa__barras {
  display: flex;
  gap: 3px;
  height: 24px;
  overflow: hidden;
}
.faixa--sistema .faixa__barras { height: 28px; }

.dia {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--cor, var(--neutro));
}
a.dia { position: relative; transition: transform 0.12s ease; }
a.dia::after {
  /* Marca o dia que tem incidente: cor sozinha não basta, e a célula é pequena
     demais para texto. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--texto);
  opacity: 0.55;
}
.dia:hover, .dia:focus { outline: 2px solid var(--texto); outline-offset: 1px; }
/* Só o dia clicável reage: animar as 90 células seria ruído. */
a.dia:hover, a.dia:focus { transform: scaleY(1.15); }

/* O dia normal usa o verde de célula, não o de texto — ver `--dia-ok`. Os demais
   estados ficam na cor forte de propósito: são a exceção, e têm de saltar. */
.dia--operacional { --cor: var(--dia-ok); }
.dia--degradado { --cor: var(--alerta); }
.dia--parcial { --cor: var(--parcial); }
.dia--total { --cor: var(--erro); }
.dia--manutencao { --cor: var(--info); }
.dia--sem_dado { --cor: var(--neutro); opacity: 0.35; }
/* Não monitorado é visualmente distinto de sem dado: ali a sonda deveria ter rodado,
   aqui não havia o que medir. Nenhum dos dois pode parecer dia de 100%. */
.dia--nao_monitorado {
  --cor: transparent;
  border: 1px dashed var(--borda);
}
.dia--cobertura-parcial {
  /* Dia medido só em parte não pode parecer dia inteiro. */
  background-image: linear-gradient(to top, var(--cor) 45%, transparent 45%);
  background-color: transparent;
  border-bottom: 2px solid var(--cor);
}

/* ---- página de histórico ---- */

.topo__volta, .topo__ir { margin: 0.4rem 0 0; font-size: 0.875rem; }

@media (min-width: 40rem) {
  .faixa__barras { height: 30px; }
  .faixa--sistema .faixa__barras { height: 38px; }
}

/* ---- manutenção programada ---- */

/* Manutenção programada é aviso, não incidente: cartão comum, sem peso de alerta. */
.programadas {
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 2.5rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--info);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 0.9rem;
}
.programadas li + li { margin-top: 0.6rem; }
.programadas li::marker { color: var(--info); }

/* ---- histórico: incidentes e manutenções ---- */

/* Sem teto de altura e sem rolagem própria: quem rola é o `.painel`, um só. Um teto
   aqui reintroduziria a rolagem em dois níveis. */
.registros {
  display: grid;
  width: 100%;
  /* O vão agora separa DIAS, não cartões — os cartões do mesmo dia têm vão próprio. */
  gap: 1.75rem;
}

/* Um cabeçalho de data por dia, como na referência. O dia sem registro fica na página
   numa linha só: ausência de incidente é informação, e um dia que some deixa quem lê
   sem saber se nada aconteceu ou se ninguém escreveu. */
.historico-dia {
  display: grid;
  gap: 0.75rem;
  /* O alvo da âncora passou a ser o cabeçalho do dia: sem folga ele encosta na borda
     de cima do painel, que é quem rola. */
  scroll-margin-top: 1rem;
}
.historico-dia__data {
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--borda);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
/* Dia limpo: cabeçalho e frase na mesma linha. Catorze deles são o calendário do
   silêncio, não catorze cartões vazios. */
.historico-dia--vazio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
}
.historico-dia--vazio .historico-dia__data { border-bottom: 0; padding-bottom: 0; }
.historico-dia__nada { margin: 0; font-size: 0.85rem; color: var(--texto-fraco); }

.registro {
  padding: 1.25rem;
  border: 1px solid var(--borda);
  /* 3px, a mesma marca de estado dos outros cartões. */
  border-left: 3px solid var(--cor, var(--neutro));
  border-radius: var(--raio);
  background: var(--superficie);
  scroll-margin-top: 1rem;
}
.registro__titulo { margin: 0; font-size: 1rem; line-height: 1.3; }
.registro__meta { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--texto-fraco); }
.registro__corpo { margin-top: 0.6rem; font-size: 0.925rem; }
.registro__corpo p { margin: 0 0 0.6rem; }
.registro__corpo p:last-child { margin-bottom: 0; }
/* `.aberto__corpo` entra nos dois seletores abaixo porque ficou de fora quando o
   incidente em destaque ganhou formato próprio: sem isto, uma lista dentro dele volta
   ao padding padrão de 40px do navegador e o código sai sem fundo. */
.registro__corpo ul,
.aberto__corpo ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.registro__corpo code,
.aberto__corpo code,
.atualizacao code {
  padding: 0.1rem 0.3rem;
  border-radius: 5px;
  background: var(--neutro-fundo);
  font-size: 0.875em;
}

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}
.tag--aberto { color: var(--erro); background: var(--erro-fundo); }
.tag--manutencao { color: var(--info); background: var(--info-fundo); }
.tag--futura { color: var(--info); background: var(--info-fundo); }
/* Neutra de propósito: diz como o registro chegou ali, não a gravidade dele. Cor de
   estado aqui competiria com a do próprio incidente. */
.tag--automatico { color: var(--neutro); background: var(--neutro-fundo); }

/* ---- cronologia do incidente ----

   Uma pilha de atualizações datadas, mais recente no topo. O mesmo bloco serve ao
   incidente em andamento (`.aberto`) e ao encerrado (`.registro`): os dois têm fundo
   `--superficie`, então uma regra basta, sem variante por contêiner.

   A cor aqui é do ESTÁGIO, não do incidente. Herdar `--cor` pintaria as quatro linhas
   da mesma cor e repetiria quatro vezes o que o cartão inteiro já diz; o que muda de
   uma linha para a outra é justamente o estágio, e é isso que se lê de longe: acabou
   ou não acabou. Todas as cores já existem e já foram auditadas em AA. */

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

/* O respiro entre itens vive no padding, não no margin: é o vão que o trilho precisa
   atravessar para ligar um marcador ao seguinte. */
.atualizacao {
  position: relative;
  padding: 0 0 1rem 1.35rem;
}
.atualizacao:last-child { padding-bottom: 0; }

/* O trilho, desenhado por item e suprimido no último, para terminar no marcador de
   baixo em vez de sobrar pendurado no vazio. */
.atualizacao::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.15rem;
  bottom: 0;
  width: 2px;
  background: var(--borda);
}
.atualizacao:last-child::before { display: none; }

/* O marcador é desenhado com borda e fundo, nunca com caractere: `content` com glifo é
   lido em voz alta por parte dos leitores de tela, e o rótulo ao lado já diz o estágio
   por extenso — seria eco, não informação. O `top` está amarrado à meia-altura da
   primeira linha da cabeça (0,82rem × 1,55 ÷ 2 − 5px); mexer num, conferir o outro. */
.atualizacao::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.33rem;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--estagio, var(--neutro));
  border-radius: 50%;
  background: var(--superficie);
}

.atualizacao__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.82rem;
}
.atualizacao__cabeca strong {
  color: var(--estagio, var(--texto));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.atualizacao__cabeca time {
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
/* O fuso é apoio da hora, não a hora. */
.atualizacao__fuso { font-size: 0.92em; }

/* O corpo da atualização é irmão de `.registro__corpo`, não filho — nenhuma regra de
   lá o alcança. */
.atualizacao > p:not(.atualizacao__cabeca) { margin: 0.3rem 0 0; font-size: 0.9rem; }
.atualizacao > p + p { margin-top: 0.45rem; }
.atualizacao ul { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }

/* Cor por estágio, toda do vocabulário que já existe: nenhuma cor nova, nenhuma
   auditoria de contraste reaberta. Rótulo fora dos quatro sugeridos fica neutro, e
   ainda assim legível e marcado. */
.atualizacao--investigando { --estagio: var(--alerta); }
.atualizacao--identificado { --estagio: var(--parcial); }
.atualizacao--monitorando  { --estagio: var(--info); }
.atualizacao--resolvido    { --estagio: var(--ok); }
.atualizacao--outro        { --estagio: var(--neutro); }

/* Resolvido é o único marcador cheio. Forma, não só cor: é a pergunta que quem abre a
   página faz antes de ler qualquer palavra. */
.atualizacao--resolvido::after { background: var(--estagio); }

/* ---- rodapé ---- */

.rodape {
  margin-top: 2.5rem;
  padding: 1.25rem 0 1rem;
  border-top: 1px solid var(--borda);
  font-size: 0.82rem;
  color: var(--texto-fraco);
}
.rodape p { max-width: 48rem; margin: 0 0 0.6rem; }
.rodape__fino { margin-top: 1rem; opacity: 0.8; }
/* O único canal de assinatura que cabe sem backend. E-mail e SMS exigiriam servidor
   guardando quem assinou; o Slack e o Teams leem este mesmo arquivo nativamente. */
.rodape__assinar code {
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  background: var(--neutro-fundo);
  font-size: 0.875em;
}

@media (min-width: 40rem) {
  body { padding: 0 1.5rem 4rem; }
  .topo__titulo { font-size: 1.85rem; }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}