/* ==========================================================
   Módulo Carregamento JS Grãos — estilo próprio

   Arquivo separado de propósito: nada aqui altera o CSS dos
   módulos que já existiam. Usa só os tokens de marca-jsgraos.css,
   então acompanha a identidade aprovada sem cor solta.
   ========================================================== */

/* ---------- avisos e botões que faltavam no Portal ---------- */

.aviso-info,
.aviso-atencao {
  border-radius: var(--jsg-raio);
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.aviso-info {
  background: var(--jsg-azul-claro);
  border-left: 3px solid var(--jsg-info);
  color: var(--jsg-texto);
}

.aviso-atencao {
  background: var(--jsg-fundo-alerta);
  border-left: 3px solid var(--jsg-alerta);
  color: var(--jsg-texto);
}

.btn-perigo {
  background: var(--jsg-erro);
  color: var(--jsg-branco);
  border: none;
  border-radius: var(--jsg-raio);
  padding: 10px 18px;
  font-family: var(--jsg-fonte);
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-perigo:hover {
  filter: brightness(0.92);
}

.btn-pequeno {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--jsg-info);
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--jsg-fonte);
  font-size: 0.88rem;
  padding: 0 4px;
}

.dica {
  display: block;
  margin-top: 4px;
  color: var(--jsg-texto-suave);
  font-size: 0.82rem;
}

/* Tabela larga: rola só ela, em vez de estourar a página inteira.
   O fechamento do dia tem 15 colunas e não cabe num notebook. */
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela-compacta th,
.tabela-compacta td {
  padding: 6px 8px;
  font-size: 0.85rem;
  vertical-align: top;
}

/* ---------- etiquetas de situação ---------- */

.carreg-etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-family: var(--jsg-fonte-titulo);
  margin-left: 8px;
  white-space: nowrap;
}

.carreg-azul     { background: var(--jsg-azul-claro); color: var(--jsg-azul); }
.carreg-amarelo  { background: var(--jsg-fundo-alerta); color: var(--jsg-alerta); }
.carreg-verde    { background: var(--jsg-fundo-sucesso); color: var(--jsg-sucesso); }
.carreg-vermelho { background: var(--jsg-fundo-erro); color: var(--jsg-erro); }
.carreg-laranja  { background: var(--jsg-fundo-alerta); color: var(--jsg-alerta); }
.carreg-cinza    { background: var(--jsg-azul-claro); color: var(--jsg-texto-suave); }

/* ---------- lista de carregamentos ---------- */

.carreg-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.carreg-item {
  background: var(--jsg-branco);
  border: 1px solid var(--jsg-borda);
  border-radius: var(--jsg-raio-grande);
  box-shadow: var(--jsg-sombra);
  padding: 16px;
}

.carreg-item.carreg-pronto {
  border-color: var(--jsg-sucesso);
}

.carreg-cabecalho-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.carreg-numero {
  font-family: var(--jsg-fonte-titulo);
  font-size: 1.05rem;
  color: var(--jsg-azul);
}

.carreg-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  font-size: 0.9rem;
  padding: 10px 0;
  border-top: 1px solid var(--jsg-borda);
}

.carreg-dados b {
  display: block;
  color: var(--jsg-texto-suave);
  font-size: 0.75rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.carreg-obs {
  background: var(--jsg-azul-claro);
  border-radius: var(--jsg-raio);
  padding: 8px 12px;
  font-size: 0.88rem;
  margin: 8px 0;
}

.carreg-ok      { color: var(--jsg-sucesso); font-size: 0.9rem; margin: 8px 0; }
.carreg-pendente{ color: var(--jsg-alerta);  font-size: 0.9rem; margin: 8px 0; }

.carreg-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--jsg-texto-suave);
}

.carreg-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.carreg-acoes-bloco {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--jsg-borda);
}

.carreg-detalhe:not(:empty) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--jsg-azul-claro);
}

.carreg-docs {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.carreg-docs li {
  padding: 6px 0;
  border-bottom: 1px solid var(--jsg-borda);
  font-size: 0.9rem;
}

.carreg-docs small {
  color: var(--jsg-texto-suave);
  margin-left: 8px;
}

/* ---------- régua do fluxo ---------- */

.carreg-regua {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 14px;
}

.carreg-passo {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--jsg-raio);
  font-size: 0.78rem;
  line-height: 1.25;
  background: var(--jsg-fundo-app);
  color: var(--jsg-texto-suave);
  border: 1px solid var(--jsg-borda);
}

.carreg-passo span {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  background: var(--jsg-borda);
  color: var(--jsg-texto);
}

.carreg-passo.concluida {
  background: var(--jsg-fundo-sucesso);
  border-color: var(--jsg-sucesso);
  color: var(--jsg-sucesso);
}

.carreg-passo.concluida span {
  background: var(--jsg-sucesso);
  color: var(--jsg-branco);
}

.carreg-passo.atual {
  background: var(--jsg-azul);
  border-color: var(--jsg-azul-escuro);
  color: var(--jsg-branco);
  font-family: var(--jsg-fonte-titulo);
}

.carreg-passo.atual span {
  background: var(--jsg-ambar);
  color: var(--jsg-azul-escuro);
}

/* ---------- painel ---------- */

.carreg-fluxo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.carreg-fluxo-card {
  background: var(--jsg-branco);
  border: 1px solid var(--jsg-borda);
  border-radius: var(--jsg-raio);
  padding: 14px;
  text-align: center;
  position: relative;
}

.carreg-fluxo-ordem {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.72rem;
  color: var(--jsg-texto-suave);
}

.carreg-fluxo-total {
  display: block;
  font-family: var(--jsg-fonte-titulo);
  font-size: 1.8rem;
  color: var(--jsg-azul);
  line-height: 1.1;
}

.carreg-fluxo-card small {
  display: block;
  margin-top: 6px;
  color: var(--jsg-texto-suave);
  font-size: 0.8rem;
  line-height: 1.3;
}

/* ---------- notificações pendentes ---------- */

.carreg-notificacao {
  border: 1px solid var(--jsg-borda);
  border-left: 3px solid var(--jsg-alerta);
  border-radius: var(--jsg-raio);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--jsg-branco);
}

.carreg-mensagem {
  background: var(--jsg-fundo-app);
  border: 1px solid var(--jsg-borda);
  border-radius: var(--jsg-raio);
  padding: 10px 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0;
}

/* ---------- abas dos cadastros ---------- */

.carreg-abas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0;
  border-bottom: 2px solid var(--jsg-borda);
  padding-bottom: 0;
}

.carreg-abas button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--jsg-fonte);
  font-size: 0.95rem;
  color: var(--jsg-texto-suave);
  margin-bottom: -2px;
}

.carreg-abas button.ativa {
  color: var(--jsg-azul);
  border-bottom-color: var(--jsg-ambar);
  font-family: var(--jsg-fonte-titulo);
}

/* ---------- responsivo: a operação usa tablet e celular ---------- */

@media (max-width: 820px) {
  .carreg-dados {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .carreg-passo {
    flex: 1 1 100%;
  }

  .carreg-acoes {
    flex-direction: column;
  }

  .carreg-acoes button {
    width: 100%;
  }

  .carreg-cabecalho-item,
  .carreg-rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================================
   MANUAL DE TREINAMENTO
   ========================================================== */

.man-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.man-secao {
  font-family: var(--jsg-fonte-titulo);
  color: var(--jsg-azul);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--jsg-ambar);
}

.man-funcao h3 {
  color: var(--jsg-azul);
  font-family: var(--jsg-fonte-titulo);
  margin-top: 0;
}

.man-funcao h3 small {
  color: var(--jsg-texto-suave);
  font-family: var(--jsg-fonte);
  font-weight: normal;
}

.man-sub {
  font-family: var(--jsg-fonte-titulo);
  color: var(--jsg-azul);
  margin: 16px 0 6px;
}

.man-lista {
  margin: 8px 0 8px 18px;
  padding: 0;
  line-height: 1.6;
}

.man-lista li {
  margin-bottom: 6px;
}

.man-destaque {
  border-left: 5px solid var(--jsg-ambar);
}

/* Regra do processo: o que a pessoa precisa levar da leitura. */
.man-regra {
  background: var(--jsg-azul-claro);
  border-left: 3px solid var(--jsg-azul);
  border-radius: var(--jsg-raio);
  padding: 10px 14px;
  margin: 12px 0;
}

/* O que impede a pessoa de avançar — e por quê. */
.man-trava {
  background: var(--jsg-fundo-alerta);
  border-left: 3px solid var(--jsg-alerta);
  border-radius: var(--jsg-raio);
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 0.93rem;
  line-height: 1.55;
}

.man-atencao {
  background: var(--jsg-fundo-erro);
  border-left: 3px solid var(--jsg-erro);
  border-radius: var(--jsg-raio);
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.93rem;
  line-height: 1.55;
}

.man-resultado {
  background: var(--jsg-fundo-sucesso);
  border-left: 3px solid var(--jsg-sucesso);
  border-radius: var(--jsg-raio);
  padding: 10px 14px;
  margin: 12px 0;
}

.man-nota {
  color: var(--jsg-texto-suave);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 10px 0;
}

.man-exemplo {
  background: var(--jsg-azul-escuro);
  color: var(--jsg-branco);
  border-radius: var(--jsg-raio);
  padding: 14px 16px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

.man-fluxo td:first-child {
  text-align: center;
  font-family: var(--jsg-fonte-titulo);
  color: var(--jsg-ambar);
}

/* ---------- impressão: o manual vira apostila ----------
   O Portal só tinha regra de impressão para as classes jsg-*.
   O manual é servido dentro do app, então precisa esconder o
   menu e a barra do próprio Portal para sair em papel. */
@media print {
  .sidebar,
  .mobile-topbar,
  .desktop-menu-toggle,
  .sidebar-hotzone,
  .man-acoes,
  #loginOverlay {
    display: none !important;
  }

  .container,
  .content {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .form-card {
    box-shadow: none;
    border: 1px solid #ccc;
    /* Cada função em uma folha: o grupo leva só a sua parte
       para a sessão de treinamento. */
    page-break-inside: avoid;
    margin-bottom: 10mm;
  }

  .man-funcao {
    page-break-before: always;
  }

  .man-secao {
    page-break-before: always;
  }

  .tabela {
    page-break-inside: avoid;
  }

  .man-exemplo {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
  }

  a[href]::after {
    content: "";
  }
}