/* Servidor Elias. Identidade: a frente de um servidor. Chassi de aluminio anodizado, LEDs de status,
   gravacao em baixo-relevo nos rotulos, tracos de osciloscopio nos graficos. */

:root {
  --chassi: #161c23;
  --chassi-2: #1a2129;
  --placa: #1f2730;
  --placa-alta: #252f39;
  --friso: #2d3843;
  --friso-forte: #3a4754;
  --tinta: #e8edf1;
  --tinta-2: #95a3b0;
  --tinta-3: #66737f;
  --ok: #57e39a;
  --atencao: #ffb53d;
  --critico: #ff5b4f;
  --traco: #79c7ff;
  --traco-2: #c79bff;
  --led-apagado: #2a333c;
  --sombra: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.7);
  --raio: 18px;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --fonte-numero: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fonte-dado: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --chassi: #e6eaee;
    --chassi-2: #dde2e7;
    --placa: #f6f8fa;
    --placa-alta: #ffffff;
    --friso: #d2d9e0;
    --friso-forte: #bcc6cf;
    --tinta: #121920;
    --tinta-2: #55626e;
    --tinta-3: #7b8792;
    --ok: #12945a;
    --atencao: #b56b00;
    --critico: #d1352b;
    --traco: #0b74bd;
    --traco-2: #7a4cc2;
    --led-apagado: #c9d1d8;
    --sombra: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -18px rgba(20,30,40,.45);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--chassi);
  color: var(--tinta);
  font: 15px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--traco); outline-offset: 2px; border-radius: 6px; }
.num { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.dado { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- LEDs ---------- */
.led {
  --c: var(--led-apagado);
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, white) 0 18%, var(--c) 55%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 10px 1px color-mix(in srgb, var(--c) 55%, transparent);
  flex: none;
}
.led--ok { --c: var(--ok); }
.led--atencao { --c: var(--atencao); }
.led--critico { --c: var(--critico); }
.led--apagado { --c: var(--led-apagado); box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; background: var(--led-apagado); }
.pisca { animation: pisca 1.6s ease-in-out infinite; }
.led--critico.pisca { animation-duration: .8s; }
@keyframes pisca { 50% { opacity: .35; } }
/* LED de atividade (disco/rede): pisca na velocidade do trafego, como o de um HD de verdade */
.atividade { animation: atividade var(--vel, 0s) steps(2, jump-none) infinite; }
@keyframes atividade { 0% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pisca, .atividade { animation: none !important; } }

/* ---------- partida ---------- */
.carregando-app { min-height: 100dvh; display: grid; place-items: center; }
.partida { display: flex; gap: 10px; align-items: center; color: var(--tinta-2); font: 600 15px var(--fonte-dado); letter-spacing: .04em; }

/* ---------- moldura ---------- */
.tela {
  max-width: 760px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 96px) max(16px, env(safe-area-inset-left));
}
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.marca { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marca h1 { margin: 0; font: 700 22px/1.1 var(--fonte-numero); letter-spacing: -.01em; }
.marca small { color: var(--tinta-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; background: var(--placa); border: 1px solid var(--friso); color: var(--tinta-2); font: 600 11px var(--fonte-dado); letter-spacing: .08em; text-transform: uppercase; flex: none; }

/* ---------- painel frontal (assinatura) ---------- */
.frente {
  position: relative;
  border-radius: 20px;
  padding: 14px 14px 12px 46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    var(--chassi-2);
  border: 1px solid var(--friso-forte);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 14px 30px -20px rgba(0,0,0,.8);
  overflow: hidden;
}
@media (prefers-color-scheme: light) {
  .frente { box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 14px 30px -22px rgba(20,30,40,.5); }
}
/* grade de ventilacao na lateral */
.frente::before {
  content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 20px; border-radius: 6px;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 3px, transparent 3px 7px);
  opacity: .55;
}
@media (prefers-color-scheme: light) { .frente::before { background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 3px, transparent 3px 7px); } }
.frente__leds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.frente__led { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0; background: none; border: 0; border-radius: 10px; color: inherit; }
.frente__led .led { width: 11px; height: 11px; }
.gravado {
  font: 700 9.5px/1 var(--fonte-dado); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
  text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 -1px 0 rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light) { .gravado { text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.08); } }
.frente__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--friso); gap: 8px; }
.frente__rodape .dado { color: var(--tinta-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- veredito ---------- */
.veredito { margin: 22px 2px 14px; }
.veredito h2 { margin: 0; font: 700 27px/1.15 var(--fonte-numero); letter-spacing: -.015em; text-wrap: balance; }
.veredito p { margin: 6px 0 0; color: var(--tinta-2); }
.veredito--ok h2 span { color: var(--ok); }
.veredito--atencao h2 span { color: var(--atencao); }
.veredito--critico h2 span { color: var(--critico); }

.alertas { display: grid; gap: 8px; margin-bottom: 16px; }
.alerta { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--placa); border: 1px solid var(--friso); }
.alerta .led { margin-top: 6px; }
.alerta strong { display: block; font-weight: 650; }
.alerta span { color: var(--tinta-2); font-size: 13.5px; }
.alerta--critico { border-color: color-mix(in srgb, var(--critico) 45%, var(--friso)); background: color-mix(in srgb, var(--critico) 8%, var(--placa)); }
.alerta--atencao { border-color: color-mix(in srgb, var(--atencao) 40%, var(--friso)); background: color-mix(in srgb, var(--atencao) 6%, var(--placa)); }

/* ---------- cartoes ---------- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(4, 1fr); } }
.cartao { background: var(--placa); border: 1px solid var(--friso); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px; min-width: 0; }
.cartao--largo { margin-top: 10px; }
.medidor { display: flex; flex-direction: column; gap: 6px; min-height: 132px; }
.medidor__topo { display: flex; justify-content: space-between; align-items: center; }
.valor { font: 650 30px/1 var(--fonte-numero); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.valor small { font-size: 15px; font-weight: 600; color: var(--tinta-2); margin-left: 2px; letter-spacing: 0; }
.sub { color: var(--tinta-2); font-size: 12.5px; }
.medidor .faisca { margin-top: auto; }
.faisca { display: block; width: 100%; height: 34px; }

.barra { position: relative; height: 6px; border-radius: 99px; background: var(--chassi); box-shadow: 0 1px 1px rgba(0,0,0,.3) inset; overflow: hidden; margin-top: auto; }
.barra > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c, var(--traco)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.barra--ok { --c: var(--ok); } .barra--atencao { --c: var(--atencao); } .barra--critico { --c: var(--critico); }

/* termometro com faixas de alerta */
.termo { position: relative; height: 6px; border-radius: 99px; margin-top: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 55%, transparent) 0 var(--a), color-mix(in srgb, var(--atencao) 60%, transparent) var(--a) var(--b), color-mix(in srgb, var(--critico) 65%, transparent) var(--b)); }
.termo > i { position: absolute; top: 50%; width: 4px; height: 14px; border-radius: 3px; background: var(--tinta); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--placa); transition: left .6s cubic-bezier(.2,.8,.2,1); }
.termo > i.disco { height: 10px; width: 10px; border-radius: 50%; background: var(--traco); }
.legenda-termo { display: flex; gap: 12px; color: var(--tinta-2); font-size: 12px; }
.legenda-termo b { font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }

.cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cab h3 { margin: 0; font: 650 16px var(--fonte-numero); }
.selo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; font: 650 12px var(--fonte); border: 1px solid var(--friso); background: var(--chassi); white-space: nowrap; }
.lista-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 14px 0 0; }
@media (min-width: 640px) { .lista-dados { grid-template-columns: repeat(4, 1fr); } }
.lista-dados div { min-width: 0; }
.lista-dados dt { color: var(--tinta-2); font-size: 12px; margin-bottom: 2px; }
.lista-dados dd { margin: 0; font: 600 16px var(--fonte-numero); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vida { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.vida .valor { font-size: 26px; }

.rede-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rede-linha .valor { font-size: 24px; }
.seta { color: var(--tinta-2); font: 600 12px var(--fonte); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }

.nucleos { display: grid; gap: 7px; margin-top: 12px; }
.nucleo { display: grid; grid-template-columns: 62px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tinta-2); }
.nucleo .barra { margin: 0; }
.nucleo span:last-child { text-align: right; color: var(--tinta); font-variant-numeric: tabular-nums; }

.secao-titulo { margin: 26px 2px 10px; font: 700 11px var(--fonte-dado); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }

/* ---------- apps ---------- */
.apps { display: grid; gap: 8px; }
.app-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--placa); border: 1px solid var(--friso); }
.app-item strong { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-item .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-item > div { min-width: 0; }
.app-mem { text-align: right; font: 600 14px var(--fonte-numero); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-mem small { display: block; color: var(--tinta-2); font: 500 11.5px var(--fonte); }
.resumo-apps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- historico ---------- */
.segmento { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 12px; background: var(--placa); border: 1px solid var(--friso); margin-bottom: 12px; }
.segmento button { border: 0; background: none; padding: 8px 0; border-radius: 9px; font-weight: 650; font-size: 13.5px; color: var(--tinta-2); }
.segmento button[aria-pressed="true"] { background: var(--placa-alta); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.grafico { position: relative; margin-top: 4px; touch-action: pan-y; }
.grafico svg { display: block; width: 100%; height: 150px; overflow: visible; }
.grafico .eixo { fill: var(--tinta-3); font: 10px var(--fonte-dado); }
.grafico .grade-l { stroke: var(--friso); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico .cursor { stroke: var(--tinta-2); stroke-width: 1; }
.dica { position: absolute; top: -6px; pointer-events: none; background: var(--placa-alta); border: 1px solid var(--friso-forte); border-radius: 10px; padding: 6px 9px; font-size: 12px; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); transform: translateX(-50%); }
.dica b { font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; color: var(--tinta-2); font-size: 12px; margin-top: 8px; }
.ocorrencias { display: grid; gap: 0; }
.ocorrencia { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--friso); }
.ocorrencia:last-child { border-bottom: 0; }
.ocorrencia .led { margin-top: 6px; }
.ocorrencia strong { font-weight: 650; }
.ocorrencia .sub { display: block; }
.ocorrencia time { color: var(--tinta-2); font-size: 12px; text-align: right; white-space: nowrap; }
.vazio { color: var(--tinta-2); padding: 18px 4px; text-align: center; }

/* ---------- barra de abas ---------- */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 8px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--chassi) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--friso);
}
.abas button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 4px 0; color: var(--tinta-3); font: 600 11px var(--fonte); }
.abas button[aria-current="page"] { color: var(--tinta); }
.abas svg { width: 24px; height: 24px; }
.abas .marcador { position: relative; }
.abas .marcador .led { position: absolute; top: -2px; right: -6px; width: 8px; height: 8px; }

/* ---------- login ---------- */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px); }
.entrada form { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.entrada .frente { padding-left: 46px; }
.entrada h1 { margin: 6px 0 0; font: 700 26px var(--fonte-numero); }
.entrada p { margin: 0; color: var(--tinta-2); }
.campo { display: grid; gap: 6px; }
.campo span { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.campo input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--friso-forte); background: var(--placa); font-size: 16px; }
.campo input:focus { outline: 2px solid var(--traco); outline-offset: 0; border-color: transparent; }
.botao { padding: 14px; border-radius: 12px; border: 0; background: var(--tinta); color: var(--chassi); font-weight: 700; font-size: 16px; }
.botao:disabled { opacity: .6; }
.botao-leve { border: 1px solid var(--friso); background: var(--placa); border-radius: 12px; padding: 10px 14px; font-weight: 600; color: var(--tinta-2); }
.erro { color: var(--critico); font-size: 14px; min-height: 1.2em; }
.aviso-offline { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--atencao) 12%, var(--placa)); border: 1px solid color-mix(in srgb, var(--atencao) 40%, var(--friso)); font-size: 13.5px; }
.rodape { margin: 28px 0 0; color: var(--tinta-3); font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

@media (min-width: 900px) { .texto { text-align: justify; } }