@import url('fontes.css');

:root {
  --texto:          #0b1c30;
  --texto-suave:    #464554;
  --texto-fraco:    #767586;
  --fundo-pagina:   #f8f9ff;
  --surface-low:    #eff4ff;
  --surface:        #e5eeff;
  --surface-high:   #dce9ff;
  --cartao:         #ffffff;
  --borda:          #c7c4d7;
  --borda-suave:    #dce9ff;
  --accent:         #4648d4;
  --accent-hover:   #3a3cb8;
  --accent-bg:      #e1e0ff;
  --aviso:          #c2710c;
  --perigo:         #ba1a1a;
  --sans:           'Inter', system-ui, sans-serif;
  --sans-display:   'Plus Jakarta Sans', system-ui, sans-serif;
}

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

body {
  font-family: var(--sans);
  background: var(--fundo-pagina);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Loading ── */
#a-carregar {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; color: var(--texto-suave); font-size: 14px;
}

/* ── Login ── */
#tela-login { display: none; align-items: center; justify-content: center; min-height: 100vh; background: var(--fundo-pagina); }
.pagina-login { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.cartao-login {
  background: var(--cartao); border: 1px solid var(--borda-suave);
  border-radius: 16px; padding: 40px 36px; width: 100%; max-width: 390px;
  box-shadow: 0 8px 32px rgba(11,28,48,.10), 0 1px 4px rgba(11,28,48,.04);
}

.login-logo-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.login-logo-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(70,72,212,.35);
}
.login-logo-icon svg { width: 26px; height: 26px; }

.cartao-login h1 {
  font-family: var(--sans-display); font-size: 22px; font-weight: 700;
  margin-bottom: 6px; letter-spacing: -.3px; color: var(--texto);
  text-align: center;
}
.cartao-login .login-sub { font-size: 13px; color: var(--texto-suave); margin-bottom: 24px; text-align: center; }
.cartao-login label {
  display: block; font-size: 11px; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 14px; margin-bottom: 4px;
}
.cartao-login input {
  display: block; width: 100%; padding: 9px 12px;
  border: 1px solid var(--borda); border-radius: 6px;
  background: var(--surface-low); color: var(--texto); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.cartao-login input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.cartao-login button[type=submit] {
  margin-top: 20px; width: 100%; padding: 10px;
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.cartao-login button[type=submit]:hover { background: var(--accent-hover); }
.cartao-login button[type=submit]:disabled { opacity: 0.6; cursor: not-allowed; }
.erro-login { margin-top: 10px; font-size: 13px; color: #ba1a1a; min-height: 18px; }

/* ── Hub shell ── */
.hub-shell { min-height: 100vh; display: flex; flex-direction: column; }

.hub-header {
  background: rgba(248,249,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda-suave);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 8px rgba(11,28,48,.05);
}
.hub-header-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px;
}
.hub-logo {
  font-family: var(--sans-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.3px; color: var(--accent); text-decoration: none;
}
.hub-header-right { display: flex; align-items: center; gap: 12px; }
.utilizador-info { font-size: 13px; color: var(--texto-suave); }
.botao-sair {
  background: var(--surface-low); border: 1px solid var(--borda-suave); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--texto-suave);
  transition: border-color .15s, color .15s;
}
.botao-sair:hover { border-color: var(--accent); color: var(--accent); }

.hub-main { max-width: 860px; margin: 0 auto; padding: 48px 24px; width: 100%; }
.hub-titulo {
  font-size: 11px; font-weight: 600; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}

.hub-apps { display: flex; flex-direction: column; gap: 10px; }

.app-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--cartao); border: 1px solid var(--borda-suave);
  border-radius: 12px; padding: 18px 22px;
  text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 1px 4px rgba(11,28,48,.04);
}
.app-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(70,72,212,.12);
  transform: translateY(-2px);
}

.app-card-icone {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--accent-bg); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent);
}
.app-card-icone svg { width: 20px; height: 20px; }

.app-card-corpo { flex: 1; }
.app-card-corpo h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.app-card-corpo p { font-size: 12px; color: var(--texto-suave); }

.app-card-seta { color: var(--texto-fraco); flex-shrink: 0; }
.app-card-seta svg { width: 16px; height: 16px; }

/* etiqueta de estado do cartão: "Offline" (desligada no servidor: o cartão fica à vista, mas não abre),
   "Em pausa" (app a pedido parada: abre, o servidor liga-a) e "A ligar…" (depois do clique) */
.app-card-estado {
  display: none; flex-shrink: 0; padding: 3px 10px; border-radius: 9999px;
  background: var(--surface, #e5eeff); color: var(--texto-suave);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.app-card.offline { cursor: not-allowed; background: transparent; box-shadow: none; }
.app-card.offline:hover { border-color: var(--borda-suave); box-shadow: none; transform: none; }
.app-card.offline .app-card-icone, .app-card.offline .app-card-corpo { opacity: .5; }
.app-card.offline .app-card-seta { display: none; }
.app-card.offline .app-card-estado, .app-card.em-pausa .app-card-estado,
.app-card.a-ligar .app-card-estado { display: inline-block; }
.app-card.a-ligar { cursor: progress; }
.app-card.a-ligar .app-card-estado { animation: a-ligar 1.2s ease-in-out infinite; }
@keyframes a-ligar { 50% { opacity: .45; } }

/* ── Servidor (só admin): mostradores do estado da máquina ── */
.hub-servidor { margin-top: 40px; }
.hub-servidor-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.servidor-aviso { font-size: 11px; color: var(--texto-fraco); margin-bottom: 16px; }

.mostradores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mostrador {
  background: var(--cartao); border: 1px solid var(--borda-suave);
  border-radius: 12px; padding: 16px 18px; min-width: 0;
  box-shadow: 0 1px 4px rgba(11,28,48,.04);
}
.mostrador-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mostrador-nome { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.mostrador-valor {
  font-family: var(--sans-display); font-size: 18px; font-weight: 700;
  letter-spacing: -.3px; font-variant-numeric: tabular-nums;
}
.mostrador-detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 8px; overflow-wrap: anywhere; }
.mostrador-detalhe:empty { display: none; }

.barra { height: 6px; border-radius: 9999px; background: var(--surface); margin-top: 10px; overflow: hidden; }
.barra-nivel { height: 100%; width: 0; border-radius: 9999px; background: var(--accent); transition: width .4s ease; }

/* aviso (laranja) e perigo (vermelho): RAM, disco e temperatura */
.mostrador.aviso .barra-nivel { background: var(--aviso); }
.mostrador.aviso .mostrador-valor { color: var(--aviso); }
.mostrador.perigo .barra-nivel { background: var(--perigo); }
.mostrador.perigo .mostrador-valor { color: var(--perigo); }
.mostrador.perigo { border-color: var(--perigo); }

/* ── Telemóvel ── */
@media (max-width: 760px) {
  .mostradores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mostrador { padding: 14px; }
}