/* Genesys — identidade real: azul, branco e preto.
   O azul é o motivo: aparece na borda do card, sob o título de seção e no
   indicador de navegação — no lugar onde antes havia um dourado inventado
   antes de a marca real existir para nós. Nada mais usa azul de destaque,
   para que ele continue significando alguma coisa. */

:root {
  --ink-950: #05070c;
  --ink-900: #090c14;
  --ink-870: #0d111b;
  --ink-840: #141a27;
  --ink-810: #1a2233;
  --line: #232c40;
  --line-soft: #161c2a;

  --blue: #2f6bff;
  --blue-dim: #1c4ecc;
  --blue-glow: rgba(47, 107, 255, 0.16);

  --paper: #f3f5fa;
  --paper-dim: #939bac;
  --paper-faint: #5e6779;

  --ok: #6fbf7a;
  --warn: #e0a83d;
  --down: #e05a4d;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --rail: 76px;
  --r: 10px;

  --f-display: "Orbitron", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Dashboard em tema claro — só o index.html usa `body.claro`; o login continua
   escuro com o vídeo do cosmos, que foi construído pra combinar com fundo
   preto e perde sentido num fundo branco. Mesma estrutura de camadas do
   escuro, luminância invertida: a página fica cinza-gelo (a "sombra" onde
   os cartões brancos ganham profundidade) e as superfícies elevadas (rail,
   cartões, painel) sobem pra branco puro. */
body.claro {
  --ink-950: #f5f6fa;
  --ink-900: #ffffff;
  --ink-870: #ffffff;
  --ink-840: #eef1f7;
  --ink-810: #e4e8f0;
  --line: #dde2ec;
  --line-soft: #e9ecf3;

  --paper: #121828;
  --paper-dim: #565f76;
  --paper-faint: #7a8398;

  --blue-glow: rgba(47, 107, 255, 0.08);
}
body.claro .cartao,
body.claro .metrica,
body.claro .caixa,
body.claro .painel,
body.claro .dialogo .caixa-d {
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

body {
  background: var(--ink-950);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Brilho de origem: luz azul nascendo do escuro, fixa e discreta — a mesma
   luz que baina o fundo do login, só mais contida aqui pra não brigar com
   as tabelas densas do resto da tela. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(1100px 560px at 22% -14%, var(--blue-glow), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ── Rótulos de seção ─────────────────────────────────────────────────────── */

.rotulo {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.secao { margin-bottom: 40px; }

.secao-cab {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.secao-cab::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 42px; height: 1px;
  background: var(--blue);
}
.secao-cab h2 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.secao-cab .conta { margin-left: auto; }

/* ── Estrutura ────────────────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  border-right: 1px solid var(--line-soft);
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 16px;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #4d84ff, var(--blue) 55%, #0e2c8f 100%);
  box-shadow: 0 0 0 1px rgba(47, 107, 255, 0.35), 0 4px 14px rgba(10, 40, 140, 0.35);
  margin-bottom: 22px;
  flex: 0 0 auto;
}
.marca svg { width: 60%; height: 60%; }

.nav-item {
  width: 46px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--paper-faint);
  position: relative;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { color: var(--paper-dim); background: var(--ink-840); }
.nav-item[aria-current="page"] { color: var(--blue); }
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -15px; top: 50%;
  width: 2px; height: 18px;
  background: var(--blue);
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
}
.nav-item .marcador {
  position: absolute;
  top: 7px; right: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--down);
}

.conteudo {
  flex: 1;
  min-width: 0;
  padding: 26px 34px 60px;
  max-width: 1500px;
}

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */

.topo {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.topo h1 {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.topo .sub { color: var(--paper-faint); margin-top: 7px; }
.topo .dir { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--ink-870);
  font-size: 12px;
}
.pilula .rotulo { color: var(--paper-dim); }

/* ── Ponto de estado ──────────────────────────────────────────────────────── */

.ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--paper-faint);
}
.ponto.operante { background: var(--ok); }
.ponto.atencao  { background: var(--warn); }
.ponto.fora     { background: var(--down); }
.ponto.desenvolvimento { background: transparent; border: 1px solid var(--paper-faint); }

/* O pulso é o único movimento contínuo da tela. Só o que está vivo pulsa. */
.ponto.operante.vivo { animation: pulso 2.8s ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 191, 122, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(111, 191, 122, 0); }
}

/* ── Métricas do servidor ─────────────────────────────────────────────────── */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 40px;
}
.metrica {
  background: var(--ink-870);
  padding: 15px 17px 13px;
  position: relative;
}
.metrica .topo-m {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.metrica .valor {
  font-family: var(--f-mono);
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.metrica .unidade { font-size: 12px; color: var(--paper-faint); margin-left: 2px; }
.metrica .detalhe { font-size: 11px; color: var(--paper-faint); margin-top: 7px; }
.metrica.alerta .valor { color: var(--warn); }
.metrica.critico .valor { color: var(--down); }

.faixa {
  height: 3px;
  background: var(--ink-810);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 9px;
}
.faixa i {
  display: block;
  height: 100%;
  background: var(--blue-dim);
  transition: width 500ms var(--ease-out);
}
.metrica.alerta .faixa i { background: var(--warn); }
.metrica.critico .faixa i { background: var(--down); }

.spark { display: block; width: 100%; height: 26px; margin-top: 8px; }

/* ── Cartões de projeto ───────────────────────────────────────────────────── */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.cartao {
  background: var(--ink-870);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 17px 19px 15px;
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
  display: block;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out),
              background-color 180ms var(--ease-out);
}
/* O filete: a assinatura da marca. */
.cartao::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--blue-dim);
  opacity: 0.55;
  transition: opacity 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.cartao.fora::before    { background: var(--down); opacity: 1; }
.cartao.atencao::before { background: var(--warn); opacity: 0.9; }
.cartao.desenvolvimento::before { background: var(--paper-faint); opacity: 0.3; }

@media (hover: hover) and (pointer: fine) {
  .cartao:hover {
    border-color: var(--line);
    background: var(--ink-840);
    transform: translateY(-1px);
  }
  .cartao:hover::before { opacity: 1; }
}
.cartao:active { transform: scale(0.994); }

.cartao h3 {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.cartao .linha-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}
.cartao .linha-cab .ponto { margin-left: auto; }
.cartao .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 13px; }
.cartao .meta .sep { color: var(--line); }
.cartao .resumo {
  color: var(--paper-dim);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao .rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--paper-faint);
}
.cartao .rodape .dir { margin-left: auto; }

/* Trilha de componentes: cada traço é uma peça do projeto. */
.trilha { display: flex; gap: 3px; margin-bottom: 12px; }
.trilha i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--ok);
  min-width: 4px;
}
.trilha i.fora { background: var(--down); }
.trilha i.apoio-fora { background: var(--warn); }
.trilha i.ocioso { background: var(--ink-810); }

.culpado {
  color: var(--down);
  font-size: 11.5px;
  margin-bottom: 12px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

/* ── Tabela de componentes ────────────────────────────────────────────────── */

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left;
  padding: 0 12px 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 400;
  border-bottom: 1px solid var(--line-soft);
}
.tabela td { padding: 10px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background-color 140ms var(--ease-out); }
/* ink-840, não ink-870: a linha vive dentro de um .caixa que já é ink-870 —
   usar a mesma cor no hover não mudava nada visível (bug antigo, corrigido
   pros dois temas, não só pro claro). */
@media (hover: hover) { .tabela tbody tr:hover { background: var(--ink-840); } }
/* Alvos são URLs e nomes de container: quebram em qualquer ponto para não
   empurrarem a tabela para fora do painel. */
.tabela .alvo {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--paper-dim);
  word-break: break-all;
  line-height: 1.35;
  margin-top: 2px;
}
.tabela .estado { color: var(--paper-faint); font-size: 12px; max-width: 150px; }
.tabela .num {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 12px;
  white-space: nowrap;
  width: 62px;
}

.caixa {
  background: var(--ink-870);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 8px 6px;
}

/* Banner de "tudo em ordem": a única superfície grande na área de dados que
   recebe o gradiente azul cheio, como pedido — uma vez por tela, não em
   toda superfície, pra não cansar a leitura das tabelas densas ao redor. */
.banner-ok {
  padding: 26px 24px;
  text-align: center;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(480px 220px at 50% -30%, rgba(47, 107, 255, 0.35), transparent 70%),
    linear-gradient(160deg, #0d1730 0%, var(--ink-870) 60%);
}
/* No claro a mesma receita (azul escurecendo pra superfície do card) vira azul
   clareando pra branco — herda a lógica, troca só a direção da luz. */
body.claro .banner-ok {
  background:
    radial-gradient(480px 220px at 50% -30%, rgba(47, 107, 255, 0.14), transparent 70%),
    linear-gradient(160deg, #e8f0ff 0%, var(--ink-870) 65%);
}
.banner-ok-titulo {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
  text-shadow: 0 0 24px var(--blue-glow);
}
body.claro .banner-ok-titulo { text-shadow: none; }
.banner-ok-sub { color: var(--paper-dim); margin-top: 8px; font-size: 13px; }

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink-810);
  color: var(--paper-faint);
  border: 1px solid var(--line-soft);
}
.tag.critico { color: var(--down); border-color: rgba(224, 90, 77, 0.3); }
.tag.apoio   { color: var(--blue-dim); }

/* ── Painel lateral ───────────────────────────────────────────────────────── */

.veu {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 4, 0.66);
  backdrop-filter: blur(3px);
  z-index: 40;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.veu.aberto { opacity: 1; }

.painel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(660px, 100vw);
  background: var(--ink-900);
  border-left: 1px solid var(--line);
  z-index: 41;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 260ms var(--ease-out);
  padding: 26px 30px 50px;
}
.painel.aberto { transform: translateX(0); }
.painel h2 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.painel .fechar {
  position: absolute;
  top: 20px; right: 24px;
  color: var(--paper-faint);
  width: 30px; height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.painel .fechar:hover { color: var(--paper); background: var(--ink-840); }
.painel .fechar:active { transform: scale(0.94); }

/* ── Feed de eventos ──────────────────────────────────────────────────────── */

.evento {
  display: flex;
  gap: 13px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
}
.evento:last-child { border-bottom: none; }
.evento .barra {
  width: 2px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--paper-faint);
  flex: 0 0 2px;
}
.evento.critico .barra    { background: var(--down); }
.evento.alerta .barra     { background: var(--warn); }
.evento.recuperado .barra { background: var(--ok); }
.evento.acao .barra       { background: var(--blue); }
.evento .corpo { flex: 1; min-width: 0; }
.evento .titulo { font-size: 13px; }
.evento .detalhe {
  color: var(--paper-faint);
  font-size: 11.5px;
  margin-top: 2px;
  word-break: break-word;
}
.evento .quando {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--paper-faint);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ink-840);
  font-size: 13px;
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out),
              background-color 150ms var(--ease-out);
}
.btn:hover { background: var(--ink-810); border-color: var(--blue-dim); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.azul { border-color: var(--blue-dim); color: var(--blue); }
.btn.perigo:hover { border-color: var(--down); color: var(--down); }

/* ── Diálogo de confirmação ───────────────────────────────────────────────── */

.dialogo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.dialogo .fundo { position: absolute; inset: 0; background: rgba(5, 4, 4, 0.76); }
.dialogo .caixa-d {
  position: relative;
  background: var(--ink-870);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 28px 22px;
  width: min(480px, 100%);
  /* Modal mantém origem central: não está ancorado a um gatilho. */
  animation: entrar 200ms var(--ease-out);
}
@keyframes entrar {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.dialogo h3 { font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 10px; }
.dialogo p { color: var(--paper-dim); font-size: 13px; margin-bottom: 8px; }
.dialogo .aviso {
  background: var(--ink-840);
  border-left: 2px solid var(--warn);
  padding: 10px 13px;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--paper-dim);
  margin: 14px 0 20px;
}
.dialogo .acoes-d { display: flex; gap: 10px; justify-content: flex-end; }
.dialogo pre {
  background: var(--ink-950);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--paper-dim);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 14px 0 18px;
}

/* ── Vazio e carregando ───────────────────────────────────────────────────── */

/* ── Ranking embutido ─────────────────────────────────────────────────────── */

.secao-ranking { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.secao-ranking .secao-cab .btn { font-size: 12px; padding: 6px 12px; }
.ranking-frame {
  flex: 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-870);
}

.vazio {
  text-align: center;
  padding: 44px 20px;
  color: var(--paper-faint);
  font-size: 13px;
}
.vazio .icone { font-size: 22px; opacity: 0.32; margin-bottom: 10px; }

.esqueleto {
  background: linear-gradient(90deg, var(--ink-870) 25%, var(--ink-840) 50%, var(--ink-870) 75%);
  background-size: 200% 100%;
  animation: brilho 1.4s linear infinite;
  border-radius: var(--r);
  height: 132px;
}
@keyframes brilho { to { background-position: -200% 0; } }

/* Entrada escalonada — decorativa, nunca bloqueia interação. */
.entra { animation: sobe 280ms var(--ease-out) both; }
@keyframes sobe {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Login ────────────────────────────────────────────────────────────────── */

/* O vídeo de fundo é o próprio nome da marca: a origem do cosmos. A captação
   original vem em tons de âmbar — um simples giro de matiz (hue-rotate) troca
   uma cor por outra sem controle (vira roxo ou musgo, testado e descartado).
   Duotono é previsível: apaga a cor original e tinge só pela luminância —
   por isso vira `grayscale` + uma camada de gradiente azul em
   `mix-blend-mode: color`, o mesmo princípio de uma imagem duotone impressa. */
.fundo-video {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(1) contrast(1.08) brightness(0.9);
}
.fundo-tinta {
  position: fixed;
  inset: 0;
  z-index: 0;
  mix-blend-mode: color;
  background: linear-gradient(135deg, #050b1f 0%, #1c4ecc 55%, #6f9bff 100%);
}
.fundo-veu {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 540px at 50% 42%, rgba(5, 7, 12, 0.1), rgba(5, 7, 12, 0.6) 75%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.3) 0%, rgba(5, 8, 16, 0.52) 100%);
}
/* O brilho de origem do body some aqui — o vídeo já faz esse trabalho. */
body:has(.fundo-video)::before { display: none; }

.login-tela { display: grid; place-items: center; min-height: 100vh; padding: 20px; position: relative; z-index: 1; }
.login-caixa { width: min(388px, 100%); text-align: center; }

.marco {
  position: relative;
  padding: 44px 38px 36px;
  background: rgba(9, 12, 19, 0.62);
  backdrop-filter: blur(14px) saturate(1.1);
  border-radius: 4px;
}
/* Cantos soltos em vez de moldura fechada — a mesma ideia do filete dourado
   dos cartões, só que em vinheta de instrumento. */
.marco .canto {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--blue-dim);
  opacity: 0.65;
}
.marco .canto.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.marco .canto.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.marco .canto.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.marco .canto.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.login-caixa .marca-g {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  background: radial-gradient(120% 120% at 30% 20%, #4d84ff, var(--blue) 55%, #0e2c8f 100%);
  box-shadow: 0 0 0 1px rgba(47, 107, 255, 0.4), 0 8px 26px rgba(10, 40, 140, 0.45);
}
.login-caixa .marca-g svg { width: 58%; height: 58%; }
.login-caixa h1 {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}
.login-caixa .sub { color: var(--paper-dim); margin-bottom: 20px; font-size: 13px; }

.pulso-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(5, 7, 12, 0.5);
  margin-bottom: 26px;
  transition: opacity 200ms var(--ease-out);
}
.pulso-pill .rotulo { color: var(--paper-dim); letter-spacing: 0.08em; }

.campo {
  width: 100%;
  padding: 12px 15px;
  background: rgba(5, 7, 12, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--paper);
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.campo:focus { outline: none; border-color: var(--blue-dim); background: rgba(5, 7, 12, 0.72); }
.campo::placeholder { color: var(--paper-faint); }
.login-caixa .btn { width: 100%; justify-content: center; margin-top: 11px; padding: 12px; }
.erro { color: #e08a76; font-size: 12.5px; margin-top: 13px; min-height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .fundo-video { display: none; }
  .fundo-veu { background: var(--ink-950); }
}

/* ── Foco visível ─────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--blue-dim); outline-offset: 2px; border-radius: 4px; }

/* ── Responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  :root { --rail: 0px; }
  .app { flex-direction: column; }
  .rail {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 10px;
    gap: 3px;
    position: sticky;
  }
  .marca { margin-bottom: 0; margin-right: 12px; width: 30px; height: 30px; font-size: 15px; }
  .nav-item[aria-current="page"]::before {
    left: 50%; top: auto; bottom: -10px;
    width: 18px; height: 2px;
    transform: translateX(-50%);
  }
  .conteudo { padding: 20px 16px 50px; }
  .topo h1 { font-size: 31px; }
  .topo .dir { width: 100%; margin-left: 0; }
  .painel { width: 100vw; padding: 22px 18px 44px; }
  .grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cartao:hover { transform: none; }
}