/* =============================================
   GRAFMETAL — css/app.css
   Estilo GLOBAL do sistema: variáveis, login, sistema principal, overlay de modal, header,
   navegação, conteúdo, cards do dashboard, avisos, loading, responsivo, campos padrão, badges do menu.
   Origem: extraído do <style> do index.html na s679 (linhas 9–142, 289–489, 502–699 e o <style>
   dos badges 1140–1149 do original) — Fase 2 da preparação para equipe (resíduo "index.html").
   A fonte (Bebas Neue + Barlow) era um @import aqui dentro e virou <link> no <head> do index.html.
   Regra da casa: estilo de UMA tela NÃO entra aqui — vai pro css/telas.css, na seção do setor.
   Cache: referenciado com ?v=sXX no index.html (o publicar.ps1 faz o bump junto com os .js).
   ============================================= */

:root {
  --azul: #0d2137;
  --azul-medio: #1a3a5c;
  --azul-claro: #2563a8;
  --laranja: #e07b20;
  --laranja-claro: #f09340;
  --branco: #f0f4f8;
  --cinza: #8aa0b8;
  --fundo: #061523;
}

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

body {
  font-family: 'Barlow', sans-serif;
  background: var(--fundo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* TELA DE LOGIN */
#tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(37,99,168,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(224,123,32,0.08) 0%, transparent 50%),
    var(--fundo);
  position: relative;
}

#tela-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,168,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,168,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.login-box {
  background: linear-gradient(135deg, rgba(26,58,92,0.9), rgba(13,33,55,0.95));
  border: 1px solid rgba(37,99,168,0.3);
  border-radius: 4px;
  padding: 50px 45px;
  width: 420px;
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  animation: fadeUp 0.6s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--laranja), var(--azul-claro));
  border-radius: 4px 4px 0 0;
}

.logo-area {
  text-align: center;
  margin-bottom: 40px;
}

.logo-titulo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 6px;
  color: var(--branco);
  line-height: 1;
}

.logo-subtitulo {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--laranja);
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 500;
}

.divisor {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,168,0.5), transparent);
  margin: 20px 0 35px;
}

.campo-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.campo-grupo {
  margin-bottom: 22px;
  position: relative;
}

.campo-input {
  width: 100%;
  background: rgba(6,21,35,0.8);
  border: 1px solid rgba(37,99,168,0.3);
  border-radius: 3px;
  padding: 14px 16px;
  color: var(--branco);
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.campo-input:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(37,99,168,0.15);
}

.campo-input::placeholder { color: rgba(138,160,184,0.4); }

.btn-entrar {
  width: 100%;
  background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
  border: none;
  border-radius: 3px;
  padding: 15px;
  color: white;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-entrar:hover {
  background: linear-gradient(135deg, var(--laranja-claro), var(--laranja));
  box-shadow: 0 8px 25px rgba(224,123,32,0.4);
  transform: translateY(-1px);
}

.btn-entrar:active { transform: translateY(0); }

.btn-entrar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.erro-msg {
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 3px;
  padding: 12px 16px;
  color: #fca5a5;
  font-size: 13px;
  margin-top: 15px;
  display: none;
  text-align: center;
}

.rodape-login {
  text-align: center;
  margin-top: 30px;
  font-size: 11px;
  color: rgba(138,160,184,0.5);
  letter-spacing: 0.5px;
  line-height: 1.8;
}
.rodape-login .rodape-empresa {
  color: rgba(138,160,184,0.65);
  font-weight: 600;
  letter-spacing: 1px;
}
.rodape-login .rodape-link {
  color: rgba(37,99,168,0.9);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.rodape-login .rodape-link:hover {
  color: var(--azul-claro);
  text-decoration: underline;
}

/* SISTEMA PRINCIPAL */
#tela-sistema {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  background: #f0f4f8;
}

/* s381 — OVERLAY ÚNICO DE MODAL (auditoria s364): fundo e z-index padronizados.
   Os modais injetados por JS usam .gm-overlay; --acima é o nível "modal sobre
   modal" (preserva a ordem dos que nasceram com z-index >= 10000). s383: os 10
   modais ESTÁTICOS deste arquivo migraram pra cá também (--acima nos que abrem
   por cima de outro modal: sec42-revogar/auditoria, cancelar-oc, devolver-oc). */
.gm-overlay {
  position: fixed;
  inset: 0;
  top: var(--tarja-altura, 0px); /* s729h (B11) — as tarjas de staging/versão (fixas, z 99998+) não cobrem o topo dos modais */
  background: rgba(15,23,42,0.55);
  z-index: 9999;
}
.gm-overlay--acima { z-index: 10010; }

/* HEADER */
.header {
  background: linear-gradient(135deg, var(--azul), var(--azul-medio));
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 4px;
  color: white;
}

.header-logo span {
  color: var(--laranja);
  font-size: 12px;
  letter-spacing: 2px;
  display: block;
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  margin-top: -4px;
}

.header-usuario {
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
}

.header-avatar {
  width: 36px;
  height: 36px;
  background: var(--laranja);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: white;
  letter-spacing: 1px;
}

.btn-sair {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  padding: 6px 14px;
  color: white;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.btn-sair:hover { background: rgba(255,255,255,0.2); }

/* NAVEGAÇÃO */
/* s371 — menu congelado: gruda logo abaixo do header (60px) ao rolar, em UMA
   linha só (sem quebrar). Fonte/espaçamento vêm de variáveis CSS que o
   _navAjustarLinha (global.js) encolhe por passos até as abas caberem na
   largura da tela. z-index 99 = abaixo do header (100), acima do conteúdo. */
.nav-tabs {
  background: var(--azul);
  display: flex;
  flex-wrap: nowrap;
  padding: 0 30px;
  border-bottom: 2px solid rgba(37,99,168,0.3);
  position: sticky;
  top: 60px;
  z-index: 99;
  /* s371b — clip: se em caso extremo não couber nem no mínimo, corta sem
     exibir barra de rolagem (o auto mostrava barra e o usuário vetou). */
  overflow-x: clip;
}

/* s371b — durante a medição do _navAjustarLinha a transição é desligada:
   com transition ativa o tamanho novo demora 0.2s pra valer e a função
   media a largura ANTIGA (fonte presa no mínimo / estouro com barra). */
.nav-tabs.nav-medindo .nav-tab { transition: none; }

.nav-tab {
  padding: 14px var(--nav-px, 22px);
  color: rgba(255,255,255,0.5);
  font-size: var(--nav-fs, 12px);
  letter-spacing: var(--nav-ls, 2px);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-tab:hover { color: rgba(255,255,255,0.8); }

.nav-tab.ativo {
  color: var(--laranja);
  border-bottom-color: var(--laranja);
}


/* CONTEÚDO */
.conteudo {
  flex: 1;
  padding: 30px;
}

.pagina { display: none; }
.pagina.ativa { display: block; }

/* CARDS DO DASHBOARD */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card-stat {
  background: white;
  border-radius: 4px;
  padding: 25px;
  border-left: 4px solid var(--azul-claro);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}

.card-stat:nth-child(1) { animation-delay: 0.1s; border-left-color: var(--azul-claro); }
.card-stat:nth-child(2) { animation-delay: 0.2s; border-left-color: #16a34a; }
.card-stat:nth-child(3) { animation-delay: 0.3s; border-left-color: var(--laranja); }
.card-stat:nth-child(4) { animation-delay: 0.4s; border-left-color: #dc2626; }

.card-stat-numero {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 2px;
  color: var(--azul);
  line-height: 1;
}

.card-stat-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 500;
  margin-top: 6px;
}

.card-stat-icone {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 32px;
  opacity: 0.1;
}

/* AVISOS */
.bem-vindo {
  background: linear-gradient(135deg, var(--azul), var(--azul-medio));
  border-radius: 4px;
  padding: 30px;
  color: white;
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
}

.bem-vindo::after {
  content: 'GRAFMETAL';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 8px;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
}

.bem-vindo h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  margin-bottom: 6px;
}

.bem-vindo p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
  letter-spacing: 1px;
}

.badge-perfil {
  display: inline-block;
  background: var(--laranja);
  color: white;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 600;
  margin-top: 10px;
}

/* EM CONSTRUÇÃO */
.em-construcao {
  background: white;
  border-radius: 4px;
  padding: 60px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.em-construcao-icone {
  font-size: 60px;
  margin-bottom: 20px;
}

.em-construcao h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--azul);
  margin-bottom: 10px;
}

.em-construcao p {
  color: var(--cinza);
  font-size: 14px;
  letter-spacing: 1px;
}

.progress-bar {
  background: #e2e8f0;
  border-radius: 10px;
  height: 6px;
  margin: 20px auto;
  max-width: 300px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--azul-claro), var(--laranja));
  border-radius: 10px;
  animation: progress 2s ease infinite alternate;
}

@keyframes progress {
  from { width: 30%; }
  to { width: 70%; }
}

/* LOADING */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* RESPONSIVO */
@media (max-width: 600px) {
  .login-box { width: 95%; padding: 35px 25px; }
  .nav-tab { padding: 12px 14px; font-size: 10px; }
  .conteudo { padding: 15px; }
  /* s371 — em tela de celular 1 linha é impossível: volta a quebrar e a rolar */
  .nav-tabs { flex-wrap: wrap; position: static; overflow-x: visible; }
}

/* CAMPOS E LISTAS — TAMANHO PADRÃO */
input, select, textarea {
  font-size: 15px !important;
  font-family: 'Barlow', sans-serif !important;
}

/* Remover setas (spinner) de inputs numéricos */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* BADGES DO MENU — animação do menu quando há item esperando o usuário: Solicitações (s125)
   e, reusando o mesmo keyframe/classe, a Expedição (s136 — retirada na fila).
   (s679: era um 2º <style> dentro do <body>, logo após a <nav>) */
/* s293 — badges de pendência: bolinha vermelha pequena e FIXA (sem piscar,
   sem recolorir a aba). Decisão do usuário: o destaque antigo (aba piscando
   laranja + anel pulsante) estava muito gritante; basta mostrar o número.
   As classes solic-pisca / badge-pulsa que o JS ainda alterna ficam inertes
   de propósito (sem regra de estilo) — só o número aparece. */
#badge-solicitacoes, #badge-producao, #badge-prod-recebimento, #badge-prod-pedidos, #badge-prod-expedicao, #badge-agenda, #badge-compras, #badge-financeiro, #badge-pedido {
  display:none; margin-left:6px; background:#dc2626; color:#fff; font-size:11px;
  font-weight:700; min-width:18px; height:18px; line-height:18px; text-align:center;
  border-radius:9px; padding:0 5px; vertical-align:middle;
}
