/* Identidade do Grupo Skytech: editorial e sobria. Azul-marinho da marca
   (#0B2C70) e branco, fios finos, titulos pesados sem serifa e caixa alta
   espacada nos rotulos. */

:root {
  --papel: #ffffff;
  --papel-2: #f3f5f9;
  --tinta: #0a1020;
  --tinta-2: #525a6b;
  --fio: #d5d9e2;
  --fio-forte: #0b2c70;
  --marca: #0b2c70;
  --mastro: #0b2c70;
  --mastro-tinta: #ffffff;
  --mastro-tinta-2: #b4c2e2;
  --destaque: #0b2c70;
  --botao: #0b2c70;
  --botao-tinta: #ffffff;
  --no-ar: #17663f;
  --em-teste: #8a5a00;
  --a-iniciar: #6d6a65;
  --largura: 1120px;
}

:root[data-tema='escuro'] {
  --papel: #080c16;
  --papel-2: #101726;
  --tinta: #f2f4f8;
  --tinta-2: #a3acbf;
  --fio: #232c40;
  --fio-forte: #f2f4f8;
  --marca: #0b2c70;
  --mastro: #0b2c70;
  --mastro-tinta: #ffffff;
  --mastro-tinta-2: #b4c2e2;
  --destaque: #9db4ee;
  --botao: #ffffff;
  --botao-tinta: #0b2c70;
  --no-ar: #63c594;
  --em-teste: #dfa63a;
  --a-iniciar: #9a968e;
}

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-tema='escuro'] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.caixa {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

.rotulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* paginas restritas ficam em branco ate a sessao ser conferida (assets/sessao.js) */
html:not([data-publico]):not([data-liberado]) body { visibility: hidden; }

/* mastro ------------------------------------------------------------------ */
.mastro { background: var(--mastro); color: var(--mastro-tinta); }
.mastro-faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--mastro-tinta-2);
}
.tema-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--mastro-tinta);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
}
.tema-botao svg { width: 17px; height: 17px; display: block; }
/* lua no tema claro (leva ao escuro), sol no tema escuro (leva ao claro) */
.tema-botao .sol { display: none; }
:root[data-tema='escuro'] .tema-botao .sol { display: block; }
:root[data-tema='escuro'] .tema-botao .lua { display: none; }
.tema-botao:hover { background: var(--mastro-tinta); color: var(--mastro); }
.tema-botao:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.mastro-principal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 0;
  flex-wrap: wrap;
}
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 22px;
}
.marca img { height: 1.15em; width: auto; display: block; }
.menu { display: flex; gap: 28px; flex-wrap: wrap; }
.menu a {
  text-decoration: none;
  color: var(--mastro-tinta-2);
  padding: 0 0 20px;
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--mastro-tinta); }
.menu a[aria-current='page'] { color: var(--mastro-tinta); border-bottom-color: var(--mastro-tinta); }

/* abertura ---------------------------------------------------------------- */
.abertura {
  padding: 60px 0 44px;
  border-bottom: 1px solid var(--fio);
}
.abertura .rotulo { color: var(--destaque); display: block; margin-bottom: 18px; }
.abertura h1 {
  margin: 0 0 20px;
  font-size: clamp(36px, 6.4vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.abertura p {
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 58ch;
}
.pagina h1 { font-size: clamp(32px, 5.2vw, 52px); max-width: none; }

/* secoes ------------------------------------------------------------------ */
.secao { padding-top: 44px; }
.secao-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 3px solid var(--fio-forte);
  padding-top: 12px;
  margin-bottom: 4px;
}
.secao-titulo h2 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.secao-titulo a { color: var(--tinta-2); text-decoration: none; }
.secao-titulo a:hover { color: var(--tinta); text-decoration: underline; }

/* empresas (pagina 1) ----------------------------------------------------- */
.empresas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.empresa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 30px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--fio);
}
.empresa + .empresa { padding-left: 28px; border-left: 1px solid var(--fio); }
.empresa h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.empresa p { margin: 0; color: var(--tinta-2); max-width: 40ch; }
.empresa .rotulo { color: var(--tinta); }
.empresa h3::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  background: var(--cor-empresa, var(--fio-forte));
}
.empresa:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* logos em SVG de uma cor so (Skytech #FF6700, Skyline #7C3AED): vao direto
   sobre o fundo, nos dois temas, sem moldura */
.logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 52px;
}
.logo img { height: 100%; width: auto; display: block; }

/* tabela de desenvolvimentos ---------------------------------------------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 14px 16px 10px 0;
  border-bottom: 1px solid var(--fio-forte);
  white-space: nowrap;
}
.tabela td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--fio);
  vertical-align: top;
}
.tabela tr:hover td { background: var(--papel-2); }
.tabela .num {
  width: 52px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta-2);
}
.tabela .nome { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.tabela .oque { color: var(--tinta-2); }
.tabela .de { color: var(--tinta-2); font-size: 14.5px; white-space: nowrap; }
.tabela .acoes { text-align: right; white-space: nowrap; padding-right: 0; }
.tabela .acoes a + a { margin-left: 16px; }

.situacao { white-space: nowrap; color: var(--cor); }
.situacao::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--cor);
  margin-right: 8px;
}
.situacao-no-ar { --cor: var(--no-ar); }
.situacao-em-teste { --cor: var(--em-teste); }
.situacao-a-iniciar { --cor: var(--a-iniciar); }

/* botoes e links ---------------------------------------------------------- */
.botao {
  display: inline-block;
  text-decoration: none;
  background: var(--botao);
  color: var(--botao-tinta);
  border: 1px solid var(--botao);
  padding: 9px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.botao:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.link {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link:hover { color: var(--tinta); }
.mais { margin: 28px 0 0; }

/* pagina 2: acessos ------------------------------------------------------- */
.aviso {
  margin: 32px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--fio);
  border-left: 3px solid var(--fio-forte);
  background: var(--papel-2);
  max-width: 78ch;
}
.aviso strong { display: block; margin-bottom: 4px; }
.aviso span { color: var(--tinta-2); }

.bloco { padding-top: 48px; scroll-margin-top: 16px; }
.bloco-topo {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 3px solid var(--cor-empresa, var(--fio-forte));
  padding: 26px 0;
}
.bloco-topo h2 { margin: 0 0 4px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.bloco-topo p { margin: 0; color: var(--tinta-2); }
.acessos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio-forte); }
.acessos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--fio);
}
.acessos strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.acessos .oque { color: var(--tinta-2); }
.acessos .host { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* rodape ------------------------------------------------------------------ */
.rodape {
  margin-top: 88px;
  border-top: 3px solid var(--fio-forte);
  padding: 20px 0 48px;
  color: var(--tinta-2);
}
.rodape .caixa { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* telas estreitas --------------------------------------------------------- */
@media (max-width: 760px) {
  .abertura { padding: 40px 0 32px; }
  .menu { gap: 20px; }
  .empresa { padding-right: 0; }
  .empresa + .empresa { padding-left: 0; border-left: 0; }

  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 18px 0; border-bottom: 1px solid var(--fio); }
  .tabela td { border: 0; padding: 0 0 6px; }
  .tabela tr:hover td { background: none; }
  .tabela .num { width: auto; }
  .tabela .nome { white-space: normal; }
  .tabela .acoes { text-align: left; padding-top: 8px; }
  .acessos li { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* conta no topo ------------------------------------------------------------ */
.mastro-acoes { display: flex; align-items: center; gap: 16px; }
.conta { display: flex; align-items: center; gap: 14px; }
.conta-nome { color: var(--mastro-tinta); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-acao {
  font-family: inherit;
  color: var(--mastro-tinta);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
  text-decoration: none;
  cursor: pointer;
}
.conta-acao:hover { color: var(--mastro-tinta-2); }

/* login -------------------------------------------------------------------- */
.login { max-width: 420px; padding: 64px 0 24px; }
.login > .rotulo { color: var(--destaque); display: block; margin-bottom: 16px; }
.login h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.login > p { margin: 0; color: var(--tinta-2); }
.login-form {
  display: grid;
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 3px solid var(--fio-forte);
}
.campo { display: grid; gap: 8px; }
.campo input {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}
.campo input:focus { outline: 2px solid var(--destaque); outline-offset: 0; border-color: var(--destaque); }
.login-form .botao { justify-self: start; font-family: inherit; cursor: pointer; padding: 12px 22px; }
.login-form .botao:disabled { opacity: 0.6; cursor: progress; }
.login-erro {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #c0392b;
  background: var(--papel-2);
  color: var(--tinta);
}
.login-nota { margin-top: 28px !important; font-size: 14.5px; }