/* Pagina de status do DOPAlab (13/11/2026): a mesma identidade do site (preto, dourado, off-white), sem depender do
   estilo.css: esta pagina tambem fica guardada na Cloudflare e precisa abrir com o servidor fora do ar.
   Regras do "liso": nada de blur, de filter nem de sombra animada. */
@font-face { font-family: "Michroma"; src: url("/status/michroma.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/status/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/status/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/status/montserrat-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

:root {
  color-scheme: dark;
  --fundo: #12161d; --painel: #1a1f28; --painel-2: #222833; --borda: #2f3642; --texto: #f4efe6; --sutil: #98a0ab;
  --ouro: #d9a441; --ouro-claro: #e9c778;
  --ok: #3fcf8e; --lento: #f2b53a; --fora: #ff6b6b; --manutencao: #5aa9ff; --vazio: #39414e;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto); min-height: 100vh;
  font: 15px/1.5 "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(ellipse 80% 50% at 85% -10%, rgba(217,164,65,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(181,96,26,.08), transparent 60%);
}
a { color: var(--ouro); }
a:hover { color: var(--ouro-claro); }
h1, h2, p { margin: 0; }

.st { max-width: 820px; margin: 0 auto; padding: 22px 16px 48px; display: grid; gap: 22px; }
.st-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-marca { display: inline-flex; color: var(--texto); font: 400 20px "Michroma", sans-serif; text-decoration: none; }
.st-marca img { display: block; height: 36px; width: auto; }
.st-etiqueta { font: 400 12px "Michroma", "Montserrat", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro); border: 1px solid rgba(217,164,65,.45); border-radius: 999px; padding: 6px 14px; }

/* ---------- O resumo ---------- */
.st-geral { --cor: var(--vazio); display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 14px; background: var(--painel); border: 1px solid var(--borda); border-left: 5px solid var(--cor); }
.st-geral[data-estado="ok"] { --cor: var(--ok); }
.st-geral[data-estado="lento"] { --cor: var(--lento); }
.st-geral[data-estado="parcial"], .st-geral[data-estado="fora"], .st-geral[data-estado="semresposta"] { --cor: var(--fora); }
.st-geral[data-estado="manutencao"] { --cor: var(--manutencao); }
.st-geral h1 { font: 400 clamp(16px, 3.4vw, 21px)/1.3 "Michroma", "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.st-geral p { color: var(--sutil); margin-top: 4px; font-size: 14px; }
.st-bola { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cor); }
.st-geral[data-estado="ok"] .st-bola { animation: st-pulso 2.4s ease-in-out infinite; }
@keyframes st-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .st-geral .st-bola { animation: none; } }

/* ---------- Numeros ---------- */
.st-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-numero { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.st-numero strong { font: 400 20px "Michroma", "Montserrat", sans-serif; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.st-numero span { color: var(--sutil); font-size: 12.5px; }

/* ---------- Avisos ---------- */
.st-avisos { display: grid; gap: 10px; }
.st-aviso { --cor: var(--sutil); background: var(--painel); border: 1px solid var(--borda); border-left: 4px solid var(--cor); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.st-aviso[data-nivel="lento"] { --cor: var(--lento); }
.st-aviso[data-nivel="fora"] { --cor: var(--fora); }
.st-aviso[data-nivel="manutencao"] { --cor: var(--manutencao); }
.st-aviso[data-nivel="info"] { --cor: var(--ouro); }
.st-aviso h3 { margin: 0; font-size: 15px; font-weight: 700; }
.st-aviso p { color: #d5d0c6; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.st-aviso .st-quando { color: var(--sutil); font-size: 12.5px; }
.st-aviso .st-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cor); border: 1px solid var(--cor); }
.st-aviso.encerrado { --cor: var(--vazio); }
.st-aviso.encerrado h3 { font-weight: 600; }

/* ---------- Listas (jogos e sistema) ---------- */
h2 { font: 400 12px "Michroma", "Montserrat", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sutil); margin: 4px 2px 10px; }
.st-lista { background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; }
.st-item { padding: 14px 16px 12px; display: grid; gap: 8px; }
.st-item + .st-item { border-top: 1px solid var(--borda); }
.st-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-nome { font-weight: 700; }
.st-estado { --cor: var(--vazio); display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cor); white-space: nowrap; }
.st-estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.st-item[data-estado="ok"] .st-estado { --cor: var(--ok); }
.st-item[data-estado="lento"] .st-estado { --cor: var(--lento); }
.st-item[data-estado="fora"] .st-estado { --cor: var(--fora); }
.st-item[data-estado="manutencao"] .st-estado { --cor: var(--manutencao); }
.st-barras { display: flex; gap: 2px; height: 30px; }
.st-barras button { flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 2px; background: var(--vazio); cursor: pointer; }
.st-barras button.c0 { background: var(--ok); }
.st-barras button.c1 { background: var(--lento); }
.st-barras button.c2 { background: var(--fora); }
.st-barras button.c3 { background: var(--manutencao); }
.st-barras button:hover, .st-barras button:focus-visible, .st-barras button.marcada { outline: 2px solid var(--texto); outline-offset: 1px; }
.st-legenda { display: flex; justify-content: space-between; gap: 8px; color: var(--sutil); font-size: 12px; }
.st-legenda .st-meio { color: #c9c4ba; text-align: center; }
.st-esqueleto { height: 62px; }

.st-rodape { color: var(--sutil); font-size: 12.5px; text-align: center; display: grid; gap: 6px; }
.st-semjs { text-align: center; color: var(--sutil); padding: 0 16px 32px; }

@media (max-width: 520px) {
  .st { padding: 16px 12px 40px; gap: 18px; }
  .st-geral { padding: 16px; gap: 12px; }
  .st-numeros { gap: 8px; }
  .st-numero { padding: 10px; }
  .st-numero strong { font-size: 16px; }
  .st-barras { gap: 1px; height: 26px; }
}