/* Paleta e fontes vindas do TemaStenv do app WinForms — os MESMOS hexadecimais, de proposito.
   Duas telas do mesmo produto com roxos diferentes e o tipo de coisa que ninguem sabe apontar e
   todo mundo percebe. Quando o tema mudar la, muda aqui, e sao os dois unicos lugares. */
:root {
  --marca-500: #6969F9;  --marca-600: #5A45E0;  --marca-700: #4F31AB;
  --marca-50:  #F2F0FF;  --marca-200: #D0C9FF;
  --fundo: #F6F5FB;      --painel: #FFFFFF;     --painel-2: #FBFAFF;
  --borda: #E8E6F2;      --borda-forte: #D8D5E8;
  --texto: #1C1B22;      --fraco: #6B6880;      --tenue: #94919F;
  --ok: #0E8A5F;         --critico: #CF3446;
}

@font-face { font-family: "Archivo";   src: url("fontes/Archivo-Bold.ttf") format("truetype");        font-weight: 700; }
@font-face { font-family: "Archivo";   src: url("fontes/Archivo-SemiBold.ttf") format("truetype");    font-weight: 600; }
@font-face { font-family: "Plex";      src: url("fontes/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Plex";      src: url("fontes/IBMPlexSans-Medium.ttf") format("truetype");  font-weight: 500; }
@font-face { font-family: "Plex";      src: url("fontes/IBMPlexSans-SemiBold.ttf") format("truetype");font-weight: 600; }
@font-face { font-family: "PlexMono";  src: url("fontes/IBMPlexMono-Medium.ttf") format("truetype");  font-weight: 500; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Plex", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

/* ── barra de titulo roxa ───────────────────────────────────────────────────────────────────── */
.barra {
  height: 46px;
  background: var(--marca-500);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  color: #fff;
}
.marca { font-family: "Archivo"; font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.marca span { font-weight: 600; opacity: .85; }
.aba {
  background: rgba(255,255,255,.16); border-radius: 6px;
  padding: 5px 14px; font-size: 13px; font-weight: 500;
}

/* ── controles da sessao ────────────────────────────────────────────────────────────────────────
   Ficam na barra de cima, encostados a direita. A regra `button` la embaixo e do cartao de login
   (largura cheia, 44px de altura) — sem estas linhas eles nasceriam do tamanho de um formulario. */
.controles { margin-left: auto; display: none; gap: 8px; align-items: center; }
.controles.aparece { display: flex; }
.controles button {
  width: auto; height: 30px; padding: 0 13px;
  background: rgba(255,255,255,.16); color: #fff;
  font-family: "Plex"; font-weight: 500; font-size: 12.5px; border-radius: 6px;
}
.controles button:hover { background: rgba(255,255,255,.30); }
/* Desconectar e o unico que encerra alguma coisa: cor propria para nao ser clicado por engano. */
.controles button.sair { background: var(--critico); }
.controles button.sair:hover { background: #B32A3A; }

/* ── barra de estado inferior ───────────────────────────────────────────────────────────────── */
.rodape {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px;
  background: var(--painel); border-top: 1px solid var(--borda);
  display: flex; align-items: center; gap: 22px; padding: 0 16px;
  color: var(--fraco); font-size: 12px;
}
.rodape b { color: var(--texto); font-weight: 500; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); display: inline-block; margin-right: 7px; }
.ponto.vivo { background: var(--ok); }
.ponto.morto { background: var(--critico); }
.direita { margin-left: auto; }

/* ── tela de conexao ────────────────────────────────────────────────────────────────────────── */
.palco { height: calc(100% - 46px - 34px); display: flex; align-items: center; justify-content: center; }

.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 14px;
  padding: 34px 38px; width: 420px;
  box-shadow: 0 12px 34px rgba(28,27,34,.07);
}
.cartao h1 { font-family: "Archivo"; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.cartao p  { color: var(--fraco); font-size: 13px; margin-bottom: 22px; line-height: 1.5; }

label { display: block; font-size: 12px; font-weight: 500; color: var(--fraco); margin: 0 0 6px 2px; }
input {
  width: 100%; height: 44px; padding: 0 14px; margin-bottom: 16px;
  border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--painel-2); color: var(--texto);
  font-family: "PlexMono"; font-size: 17px; letter-spacing: 1px;
}
input:focus { outline: none; border-color: var(--marca-500); background: #fff; }

button {
  width: 100%; height: 44px; border: 0; border-radius: 8px;
  background: var(--marca-500); color: #fff;
  font-family: "Plex"; font-weight: 600; font-size: 14px; cursor: pointer;
}
button:hover { background: var(--marca-600); }
button:disabled { background: var(--borda-forte); cursor: default; }

.recado { margin-top: 16px; font-size: 13px; min-height: 19px; color: var(--critico); line-height: 1.5; }
.recado.aviso { color: var(--fraco); }   /* esperar nao e falhar: espera nao se pinta de vermelho */

/* ── tela remota ────────────────────────────────────────────────────────────────────────────── */
#tela { display: none; height: calc(100% - 46px - 34px); background: #14131a; }
/* O cursor e a SETA normal, de proposito. O hospedeiro nao manda o cursor da maquina remota (esta
   escrito no TelaGdi: o mouse e desenhado por cima, a parte), entao a seta do navegador e a UNICA
   referencia de onde o mouse esta la do outro lado — ela precisa parecer um mouse. A mira (crosshair)
   estava aqui e dizia a coisa errada: parece ferramenta de recorte, e ninguem reconhece a propria
   posicao numa mira. */
#tela canvas {
  display: block; margin: 0 auto; height: 100%; max-width: 100%;
  object-fit: contain; cursor: default;
}