/* Painel de monitoramento do Matrix — chamado 116437.
 *
 * Direcao: painel de instrumento industrial. A marca da Tega e geometrica e
 * tecnica (o A sem travessao, o G aberto, o X pontilhado, o "s i s t e m a s"
 * bem espacado), entao o painel ecoa isso: grade pontilhada de fundo, rotulos
 * em versalete espacado, numerais tabulares grandes.
 *
 * A tela e lida durante incidente, por alguem tenso. Prioridade: o numero
 * grande legivel a distancia, contraste alto, zero movimento gratuito.
 */

/* ---------- fundacao ---------- */
:root {
  --tinta:        #070a0f;
  --tinta-2:      #0d1219;
  --superficie:   #121820;
  --superficie-2: #172029;
  --borda:        #1f2a36;
  --borda-forte:  #2b3947;

  --texto:        #e8eef5;
  --texto-2:      #8b9aab;
  --texto-3:      #5d6b7a;

  --verde:  #3fb950;
  --azul:   #4493f8;
  --ambar:  #d29922;
  --roxo:   #a371f7;
  --vermelho: #f85149;

  --serif: "Barlow Semi Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --raio: 4px;
  --gutter: clamp(16px, 2.5vw, 28px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--gutter);
  background-color: var(--tinta);
  /* Grade pontilhada: eco do X da marca. Fica quase invisivel, mas tira a
     chapa morta do preto solido e da profundidade sem custar contraste. */
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(68,147,248,.07), transparent 60%);
  background-size: 22px 22px, 100% 100%;
  color: var(--texto);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- cabecalho ---------- */
.topo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}

.marca img { display: block; height: 34px; width: auto; opacity: .92; }

.identidade { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.identidade .host {
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  line-height: 1.05;
}

.identidade .specs {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texto-3);
  letter-spacing: .04em;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: 100px;
  background: var(--superficie);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
}

.bolinha {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(63,185,80,.16);
}

/* Pulso lento so no estado degradado. Movimento aqui carrega informacao:
   significa "o painel esta cego", nao e enfeite. */
.estado.degradado { border-color: rgba(210,153,34,.45); color: var(--ambar); }
.estado.degradado .bolinha {
  background: var(--ambar);
  box-shadow: 0 0 0 3px rgba(210,153,34,.18);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
  .estado.degradado .bolinha { animation: none; }
  * { transition: none !important; }
}

.sair {
  background: none;
  border: 1px solid var(--borda-forte);
  color: var(--texto-3);
  border-radius: var(--raio);
  padding: 6px 13px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  transition: color .15s, border-color .15s;
}
.sair:hover { color: var(--texto); border-color: var(--texto-3); }

/* ---------- grade ---------- */
.grade {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  margin-bottom: 14px;
}

.grade.duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }

/* ---------- cartao ---------- */
.cartao {
  position: relative;
  background:
    linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px 17px 12px;
  overflow: hidden;
}

/* Fio de cor no topo: identifica a metrica sem gastar area util. */
.cartao[data-cor]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--acento, var(--texto-3));
  opacity: .75;
}

.cartao .rotulo {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.cartao .numero {
  font-family: var(--mono);
  font-size: clamp(34px, 5.2vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.cartao .numero .un {
  font-size: .36em;
  color: var(--texto-3);
  margin-left: 5px;
  letter-spacing: .02em;
}

/* Linha de apoio sob o numero: diz DE QUE e o percentual. Sem ela o cartao
   de disco levou a pergunta "isso e espaco ou I/O?". */
.cartao .detalhe {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-3);
  letter-spacing: .03em;
  margin-top: 2px;
}

/* ---------- cartao clicavel (os quatro do topo) ---------- */
.cartao.abrivel { cursor: pointer; transition: border-color .15s, transform .15s; }
.cartao.abrivel:hover { border-color: var(--borda-forte); }
.cartao.abrivel:active { transform: translateY(1px); }
.cartao.abrivel:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.cartao .lupa {
  position: absolute;
  top: 12px; right: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--texto-3);
  opacity: 0;
  transition: opacity .15s;
}
.cartao.abrivel:hover .lupa,
.cartao.abrivel:focus-visible .lupa { opacity: 1; }

/* ---------- area do grafico ---------- */
.faixa { position: relative; margin-top: 8px; }
.faixa svg { display: block; width: 100%; height: 52px; }

.cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--texto-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}
.faixa.ativo .cursor { opacity: .8; }

.ponto {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--acento, var(--texto));
  box-shadow: 0 0 0 2px var(--superficie);
  opacity: 0;
  pointer-events: none;
}
.faixa.ativo .ponto { opacity: 1; }

.dica {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  padding: 5px 9px;
  background: #030507;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}
.faixa.ativo .dica { opacity: 1; }
.dica .hora { color: var(--texto-3); display: block; font-size: 10.5px; }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 0 0 7px;
  border-bottom: 1px solid var(--borda);
}
tbody td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(31,42,54,.55);
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px; }
td.prog { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
td.fraco, .fraco { color: var(--texto-3); }

/* Barra proporcional atras do nome do processo: o ranking vira leitura
   instantanea, sem precisar comparar numeros.
   A primeira coluna precisa de largura fixa: sem isso o <td> encolhe ate o
   texto e a porcentagem passa a ser relativa ao NOME, nao a coluna -- o
   processo do topo aparecia com barra pela metade. */
tbody td:first-child { width: 58%; }
.barra {
  position: relative;
  display: block;
  padding: 2px 0 2px 0;
}
.barra::before {
  content: "";
  position: absolute;
  left: -6px; top: 0; bottom: 0;
  width: calc(var(--pct, 0) * 1%);
  max-width: calc(100% + 12px);
  background: linear-gradient(90deg, rgba(68,147,248,.20), rgba(68,147,248,.04));
  border-left: 2px solid var(--azul);
  border-radius: 1px;
  z-index: 0;
}
.barra > span { position: relative; z-index: 1; }

.vazio {
  color: var(--texto-3);
  font-size: 13.5px;
  padding: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.vazio::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--texto-3);
  opacity: .5;
}

.secao { margin-top: 14px; }
.secao > .rotulo {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 10px;
}

.destaque { color: var(--ambar); }

/* ---------- dialogo ampliado ---------- */
dialog.amp {
  width: min(920px, 94vw);
  padding: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--tinta-2);
  color: var(--texto);
}
dialog.amp::backdrop { background: rgba(3,5,7,.78); backdrop-filter: blur(3px); }

.amp-topo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--borda);
}
.amp-topo h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.amp-topo .agora {
  font-family: var(--mono);
  font-size: 25px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.amp-topo .agora .un { font-size: .45em; color: var(--texto-3); margin-left: 4px; }

.amp-corpo { padding: 18px 22px 22px; }
.amp-corpo .faixa svg { height: clamp(200px, 34vh, 320px); }

.amp-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--texto-3);
}
.amp-resumo b {
  display: block;
  color: var(--texto);
  font-weight: 500;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* No fluxo do cabecalho, nao absoluto: posicionado por cima ele colidia com
   o valor atual, que tambem fica na direita e cresce conforme o numero. */
.fechar {
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  color: var(--texto-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 9px;
  align-self: center;
  transition: color .15s, border-color .15s;
}
.fechar:hover { color: var(--texto); border-color: var(--borda-forte); }
.fechar:hover { color: var(--texto); }

/* ---------- login ---------- */
.entrada {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 2 * var(--gutter));
}

.entrada .caixa {
  width: min(370px, 100%);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 34px 32px 30px;
  position: relative;
  overflow: hidden;
}
.entrada .caixa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--verde), var(--azul), var(--roxo));
  opacity: .8;
}

.entrada .marca img { height: 40px; margin-bottom: 26px; }
.entrada h1 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.entrada .sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texto-3);
  letter-spacing: .05em;
  margin-bottom: 24px;
}

.campo { margin-bottom: 13px; }
.campo label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 5px;
}
.campo input {
  width: 100%;
  padding: 10px 12px;
  background: var(--tinta);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 14px;
  transition: border-color .15s;
}
.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(68,147,248,.13);
}

.entrar {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: var(--texto);
  color: var(--tinta);
  border: none;
  border-radius: var(--raio);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s;
}
.entrar:hover { opacity: .88; }

.erro {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(248,81,73,.09);
  border: 1px solid rgba(248,81,73,.3);
  border-radius: var(--raio);
  padding: 9px 12px;
  font-size: 13px;
  color: #ff9c94;
  margin-bottom: 16px;
}

.rodape {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--texto-3);
  letter-spacing: .05em;
}

/* ---------- telas estreitas ---------- */
@media (max-width: 560px) {
  .topo { gap: 12px; }
  .marca img { height: 27px; }
  /* O `order` tem que ir no <form>, nao no <button>: quem e filho do flex e
     o form. Sem isso o "Sair" aparecia antes do selo de estado, que e a
     informacao mais importante do cabecalho. */
  .estado { margin-left: 0; order: 3; }
  .topo form { order: 4; margin-left: auto; }
  .cartao .numero { font-size: 38px; }
  td.prog { font-size: 11.5px; }
}

/* ---------- navegacao entre as duas telas ---------- */
.abas { display: flex; gap: 4px; }
.abas a {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  color: var(--texto-3);
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: .05em;
  transition: color .15s, border-color .15s;
}
.abas a:hover { color: var(--texto); }
.abas a.ativa {
  color: var(--texto);
  border-color: var(--borda-forte);
  background: var(--superficie);
}

/* ---------- filtros de periodo ---------- */
.filtros {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chip {
  padding: 5px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: 100px;
  color: var(--texto-3);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--texto); }
.chip.ativo { background: var(--texto); color: var(--tinta); border-color: var(--texto); }
.filtros .resumo {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
}

/* ---------- distribuicao por hora do dia ---------- */
.horas {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  align-items: end;
  height: 108px;
  margin-top: 12px;
}
.hora-col { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.hora-barra {
  height: var(--h, 0%);
  min-height: 2px;
  background: linear-gradient(180deg, var(--azul), rgba(68,147,248,.35));
  border-radius: 1px 1px 0 0;
  transition: filter .15s;
}
.hora-col:hover .hora-barra { filter: brightness(1.4); }
.hora-rot {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--texto-3);
  text-align: center;
  margin-top: 5px;
}
.legenda { font-size: 11.5px; margin-top: 10px; display: block; }

/* ---------- ranking historico ---------- */
.prog-link {
  display: block;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
}
.prog-link:hover > span { text-decoration: underline; }
.caminho { font-family: var(--mono); font-size: 11px; margin-top: 2px; }
.prog-titulo { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.limpar { margin-left: 10px; text-decoration: none; font-size: 11.5px; }
.limpar:hover { color: var(--texto); }

@media (max-width: 560px) {
  .abas { order: 3; margin-left: 0; }
  .horas { gap: 1px; height: 84px; }
  .hora-rot { font-size: 8px; }
  /* Em tela estreita a coluna do programa nao pode comer a tabela toda. */
  tbody td:first-child { width: auto; }
}

/* Tabela larga em tela estreita: rola DENTRO do cartao. Sem isto o
   `overflow: hidden` do cartao corta as colunas da direita em silencio --
   pior que barra de rolagem, porque some dado sem avisar. */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rolagem > table { min-width: 460px; }
.rolagem::-webkit-scrollbar { height: 6px; }
.rolagem::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 3px; }