/* ==========================================================
   MARCA JS GRÃOS — base de estilo compartilhada
   Versão 1.0 · extraída do Portal Corporativo JS Grãos

   Arquivo PORTÁTIL: copie para qualquer sistema novo da empresa e
   inclua ANTES do CSS específico do projeto.

       <link rel="stylesheet" href="/static/marca-jsgraos.css" />
       <link rel="stylesheet" href="/static/meu-projeto.css" />

   Especificação completa: BRANDING.md
   ========================================================== */

:root {
  /* ---------- Institucionais ---------- */
  --jsg-azul: #06315A;           /* primária: menu, botões, títulos */
  --jsg-azul-escuro: #041E37;   /* topo, hover, item ativo */
  --jsg-ambar: #F8B149;          /* destaque: ação principal, indicadores */
  --jsg-azul-claro: #EEF3F8;          /* fundo claro, cabeçalho de tabela */

  /* ---------- Neutros ---------- */
  --jsg-branco: #FFFFFF;
  --jsg-texto: #12222F;
  --jsg-texto-suave: #5C6E7E;
  --jsg-cinza: #5C6E7E;
  --jsg-borda: #D8E2EC;
  --jsg-borda-campo: #C9D6E4;
  --jsg-fundo-app: #F4F7FA;

  /* ---------- Semânticas ---------- */
  --jsg-sucesso: #1E7A4B;
  --jsg-erro: #B23B3B;
  --jsg-alerta: #B8791A;
  --jsg-info: #0E4C82;
  --jsg-fundo-sucesso: #E3F1EA;
  --jsg-fundo-erro: #FBEEEE;
  --jsg-fundo-alerta: #FDF3E3;

  /* ---------- Forma ---------- */
  --jsg-raio: 8px;
  --jsg-raio-grande: 12px;
  --jsg-sombra: 0 1px 3px rgba(0, 0, 0, 0.04);
  --jsg-sombra-elevada: 0 4px 14px rgba(0, 0, 0, 0.08);
  --jsg-sombra-escura: 0 10px 28px rgba(0, 0, 0, 0.28);

  /* ---------- Tipografia ---------- */
  /* Mesma dupla do tema das apresentações da Diretoria. Sem fonte externa
     de propósito: a rede corporativa pode não ter saída para o Google
     Fonts, e as duas já vêm com o Windows. */
  --jsg-fonte: Calibri, "Segoe UI", Arial, sans-serif;
  --jsg-fonte-titulo: "Segoe UI Semibold", "Segoe UI", Calibri, Arial, sans-serif;

  /* ---------- Layout ---------- */
  --jsg-menu-largura: 220px;
  --jsg-menu-largura-recolhido: 64px;
}

/* ==========================================================
   BASE
   ========================================================== */
body {
  margin: 0;
  font-family: var(--jsg-fonte);
  color: var(--jsg-texto);
  background: var(--jsg-fundo-app);
}

/* ==========================================================
   MARCA — DUAS VERSÕES

   A identidade é azul-marinho, e as superfícies principais também são.
   Por isso existem dois arquivos:

     JSgraos.svg           colorida  -> fundo CLARO, documentos impressos
     JSgraos-negativa.svg  negativa  -> fundo AZUL-MARINHO (topo, login, menu)

   Marca azul sobre fundo azul só sobrevive pelo contorno branco e fica pior
   que a negativa. Escolha o arquivo pelo fundo, não pelo hábito.

   ⚠️ SEM placa branca, medalhão ou caixa atrás. O SVG tem contorno branco
   próprio; placa anularia o efeito. Profundidade = drop-shadow.
   ⚠️ NUNCA aplicar filtro de cor: apaga o âmbar e o azul da marca.
   ========================================================== */
.jsg-marca {
  display: block;
  width: auto;
  height: auto;
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.3));
}

.jsg-marca-topo { height: 44px; }              /* topo de página */
.jsg-marca-login { width: min(76%, 300px); }   /* painel de login */
.jsg-marca-menu { max-width: 172px; width: 100%; }
.jsg-marca-documento { height: 58px; }         /* impressão */

/* ==========================================================
   TIPOGRAFIA
   ========================================================== */
.jsg-titulo {
  font-family: var(--jsg-fonte-titulo);
  font-size: 26px;
  font-weight: 700;
  color: var(--jsg-azul-escuro);
  margin: 0 0 6px;
}

.jsg-subtitulo {
  font-size: 14px;
  color: var(--jsg-cinza);
  line-height: 1.4;
  margin: 0 0 16px;
}

.jsg-secao {
  font-family: var(--jsg-fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  color: var(--jsg-azul);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--jsg-borda);
  padding-bottom: 6px;
  margin: 22px 0 12px;
}

/* ==========================================================
   BOTÕES
   Âmbar = a ação principal da tela. Um por tela.
   ========================================================== */
.jsg-btn,
.jsg-btn-primario,
.jsg-btn-secundario,
.jsg-btn-destaque {
  border: none;
  border-radius: var(--jsg-raio);
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}

.jsg-btn-primario { background: var(--jsg-azul); color: #fff; }
.jsg-btn-primario:hover { background: var(--jsg-azul-escuro); }

.jsg-btn-secundario { background: var(--jsg-cinza); color: #fff; }

.jsg-btn-destaque {
  background: var(--jsg-ambar);
  color: var(--jsg-azul-escuro);
  font-weight: 700;
}
.jsg-btn-destaque:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(248, 177, 73, 0.4);
}

.jsg-btn-mini {
  background: var(--jsg-azul);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* ==========================================================
   CARTÕES E KPIs
   A faixa verde à esquerda é a assinatura visual da marca.
   ========================================================== */
.jsg-card {
  background: var(--jsg-branco);
  border: 1px solid var(--jsg-borda);
  border-radius: var(--jsg-raio);
  padding: 16px 18px;
  box-shadow: var(--jsg-sombra);
}

.jsg-kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 16px 0 22px;
}

.jsg-kpi {
  background: var(--jsg-branco);
  border: 1px solid var(--jsg-borda);
  border-left: 4px solid var(--jsg-azul);
  border-radius: var(--jsg-raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jsg-kpi-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--jsg-texto-suave);
}

.jsg-kpi-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--jsg-azul-escuro);
  line-height: 1.2;
  word-break: break-word;
}

.jsg-kpi-detalhe {
  font-size: 11px;
  color: #93A5B4;
}

/* ==========================================================
   TABELAS
   Sempre dentro de .jsg-tabela-scroll (exigência de uso em celular).
   ========================================================== */
.jsg-tabela-scroll { overflow-x: auto; }

.jsg-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jsg-tabela th,
.jsg-tabela td {
  border-bottom: 1px solid #E4EBF2;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.jsg-tabela th {
  background: var(--jsg-azul-claro);
  color: var(--jsg-azul-escuro);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.jsg-tabela tbody tr:hover { background: #F7FAFD; }

/* ==========================================================
   FORMULÁRIOS
   ========================================================== */
.jsg-campo { display: flex; flex-direction: column; margin-bottom: 14px; }

.jsg-campo label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
  color: var(--jsg-azul-escuro);
}

.jsg-campo input,
.jsg-campo select,
.jsg-campo textarea {
  padding: 10px;
  border: 1px solid var(--jsg-borda-campo);
  border-radius: var(--jsg-raio);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.jsg-campo input:focus,
.jsg-campo select:focus,
.jsg-campo textarea:focus {
  outline: none;
  border-color: var(--jsg-azul);
}

/* ==========================================================
   MENSAGENS E AVISOS
   ========================================================== */
.jsg-msg-sucesso { color: var(--jsg-sucesso); font-weight: bold; margin-top: 12px; }
.jsg-msg-erro { color: var(--jsg-erro); font-weight: bold; margin-top: 12px; }

/* Dado que ainda não existe — nunca inventar número no lugar. */
.jsg-aviso-vazio {
  background: var(--jsg-fundo-alerta);
  border-left: 4px solid var(--jsg-ambar);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: #8A6A2F;
  margin: 10px 0;
}

.jsg-aviso-info {
  background: #EEF3F8;
  border-left: 4px solid var(--jsg-azul);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
}

.jsg-selo {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.jsg-selo-ok { background: var(--jsg-fundo-sucesso); color: var(--jsg-azul); }
.jsg-selo-pendente { background: #FDF3E3; color: var(--jsg-alerta); }

/* ==========================================================
   MENU LATERAL
   ========================================================== */
.jsg-menu {
  width: var(--jsg-menu-largura);
  background: var(--jsg-azul);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.jsg-menu.recolhido { width: var(--jsg-menu-largura-recolhido); }

.jsg-menu ul { list-style: none; padding: 0; margin: 0; }

.jsg-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.jsg-menu li:hover { background: var(--jsg-azul-escuro); }

.jsg-menu li.ativo {
  background: var(--jsg-azul-escuro);
  border-left-color: var(--jsg-ambar);
  font-weight: 600;
}

.jsg-menu li.grupo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.45);
  padding: 14px 14px 5px;
  cursor: default;
}
.jsg-menu li.grupo:hover { background: none; }

/* Menu rolável entre marca fixa e rodapé fixo: evita corte dos últimos
   itens em telas 1366x768. */
.jsg-menu-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.jsg-menu-rodape {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 12px;
}

/* ==========================================================
   SUPERFÍCIES ESCURAS (topo, hero, rodapé)
   ========================================================== */
.jsg-superficie-escura { background: var(--jsg-azul-escuro); color: #fff; }

.jsg-hero {
  background: linear-gradient(145deg, var(--jsg-azul) 0%, var(--jsg-azul-escuro) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Formas orgânicas do briefing aprovado (grão / gota de óleo). */
.jsg-hero::before,
.jsg-hero::after {
  content: "";
  position: absolute;
  border-radius: 50% 50% 50% 12%;
  opacity: 0.13;
}
.jsg-hero::before {
  width: 320px; height: 320px;
  right: -60px; top: -80px;
  background: var(--jsg-ambar);
  transform: rotate(24deg);
}
.jsg-hero::after {
  width: 200px; height: 200px;
  right: 180px; bottom: -90px;
  background: #9DB3C7;
  transform: rotate(-14deg);
}

/* ==========================================================
   MOBILE — quebra em 768px
   ========================================================== */
@media (max-width: 768px) {
  .jsg-kpi-grade { grid-template-columns: 1fr; }

  .jsg-btn-primario,
  .jsg-btn-secundario,
  .jsg-btn-destaque { width: 100%; padding: 14px 18px; }

  .jsg-btn-mini { padding: 8px 12px; }

  .jsg-menu {
    position: fixed;
    left: -100%;
    z-index: 1000;
    transition: left 0.2s ease;
  }
  .jsg-menu.aberto { left: 0; }
}

/* ==========================================================
   IMPRESSÃO — relatórios e documentos
   ========================================================== */
@media print {
  body { background: #fff; margin: 12mm; }
  .jsg-menu, .jsg-btn, .jsg-btn-primario,
  .jsg-btn-secundario, .jsg-btn-destaque, .jsg-btn-mini { display: none !important; }
  .jsg-card { box-shadow: none; border: 1px solid #ccc; }
  .jsg-cabecalho-documento { page-break-after: avoid; }
}