/* Estilos do login e do menu. As telas de operação (kds.css, admin.css) são
   independentes de propósito: mudar o menu não pode mexer na tela de produção. */

:root {
  --bg: #0d1117;
  --card: #161b22;
  --card-borda: #30363d;
  --texto: #e6edf3;
  --texto-fraco: #8b949e;
  --verde: #2ea043;
  --ambar: #d29922;
  --vermelho: #da3633;
  --azul: #316dca;
}

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

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.marca { font-size: 34px; font-weight: 800; letter-spacing: 1px; }

.oculto { display: none !important; }

/* --- login ---------------------------------------------------------------- */

body.centrado {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.painel {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--card-borda);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.papeis { display: flex; gap: 12px; width: 100%; }

.papel {
  flex: 1;
  background: #0d1117;
  border: 2px solid var(--card-borda);
  border-radius: 12px;
  color: var(--texto-fraco);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  cursor: pointer;
  min-height: 100px;
}
.papel.ativo { border-color: var(--azul); background: #12233d; color: var(--texto); }

.papel-icone { font-size: 26px; }
.papel-nome { font-size: 18px; font-weight: 700; }
.papel-desc { font-size: 12px; opacity: 0.75; text-align: center; }

#form { width: 100%; display: flex; flex-direction: column; gap: 12px; }

#senha {
  background: #0d1117;
  border: 2px solid var(--card-borda);
  border-radius: 12px;
  color: var(--texto);
  font-size: 22px;
  padding: 15px 16px;
  text-align: center;
  letter-spacing: 2px;
}
#senha:focus { outline: none; border-color: var(--azul); }

.btn-entrar {
  background: var(--azul);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  min-height: 58px;
}

.erro { color: #ff9c96; font-size: 16px; text-align: center; }

.aviso-padrao {
  background: #3d2b0a;
  color: #f0c674;
  border: 1px solid var(--ambar);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* --- menu ----------------------------------------------------------------- */

.barra-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #010409;
  border-bottom: 2px solid var(--card-borda);
}
.barra-dir { display: flex; align-items: center; gap: 14px; }

.papel-atual {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
  border: 1px solid var(--card-borda);
  border-radius: 20px;
  padding: 5px 12px;
}

.btn-sair {
  background: none;
  border: 1px solid var(--card-borda);
  border-radius: 8px;
  color: var(--texto-fraco);
  padding: 9px 16px;
  font-size: 15px;
  cursor: pointer;
  min-height: 42px;
}

.menu { padding: 24px; max-width: 1100px; margin: 0 auto; }

.secao {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-fraco);
  margin: 20px 0 12px;
}

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

.cartao {
  background: var(--card);
  border: 2px solid var(--card-borda);
  border-radius: 14px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--texto);
  min-height: 140px;
  justify-content: center;
}
.cartao:hover { border-color: var(--azul); }
.cartao.admin:hover { border-color: var(--ambar); }

.cartao-icone { font-size: 32px; }
.cartao-nome { font-size: 24px; font-weight: 700; }
.cartao-desc { font-size: 14px; color: var(--texto-fraco); }

.cartao-carga { font-size: 14px; color: var(--ambar); font-weight: 600; }