:root {
  --azul-escuro: #123a52;
  --azul: #1d5a80;
  --azul-claro: #e8f1f6;
  --cinza-fundo: #f4f6f8;
  --cinza-borda: #dde3e8;
  --cinza-texto: #4a5560;
  --texto: #1c2530;
  --verde: #2e7d4f;
  --vermelho: #b3372c;
  --branco: #ffffff;
  --raio: 8px;
  --sombra: 0 1px 3px rgba(16, 30, 44, 0.08), 0 1px 2px rgba(16, 30, 44, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cinza-fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Tela de login ---------- */
.tela-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cartao-login {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}
.cartao-login h1 {
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--azul-escuro);
}
.cartao-login p.sub {
  margin: 0 0 24px;
  color: var(--cinza-texto);
  font-size: 13px;
}

/* ---------- Formulários genéricos ---------- */
label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-texto);
  margin: 14px 0 5px;
}
label:first-child { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  /* 16px é o mínimo pra evitar o zoom automático que o Safari do iPhone
     aplica sozinho em qualquer campo com fonte menor que essa ao tocar
     nele — é esse zoom automático (a página inteira "pula" de escala) que
     faz o formulário parecer com uma diapositiva diferente no celular,
     mesmo sem nenhuma mudança real de layout por trás. */
  font-size: 16px;
  font-family: inherit;
  background: var(--branco);
  color: var(--texto);
  text-align: left;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(29, 90, 128, 0.15);
}
button {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  padding: 9px 16px;
  font-weight: 600;
}
.btn-primario { background: var(--azul); color: var(--branco); }
.btn-primario:hover { background: var(--azul-escuro); }
.btn-secundario { background: var(--branco); color: var(--azul); border-color: var(--azul); }
.btn-secundario:hover { background: var(--azul-claro); }
.btn-perigo { background: var(--branco); color: var(--vermelho); border-color: var(--vermelho); }
.btn-perigo:hover { background: #fbeceb; }
.btn-link { background: none; border: none; color: var(--azul); font-weight: 600; padding: 4px 0; }
button:disabled { opacity: 0.55; cursor: default; }
.btn-bloco { width: 100%; margin-top: 20px; padding: 11px; }

.erro {
  background: #fbeceb;
  color: var(--vermelho);
  border: 1px solid #f1c6c1;
  border-radius: var(--raio);
  padding: 9px 12px;
  font-size: 13px;
  margin-top: 14px;
}
.sucesso {
  background: #eaf6ee;
  color: var(--verde);
  border: 1px solid #bfe3cc;
  border-radius: var(--raio);
  padding: 9px 12px;
  font-size: 13px;
  margin-top: 14px;
}

/* ---------- Cabeçalho / navegação ---------- */
.cabecalho {
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cabecalho .marca {
  font-weight: 700;
  font-size: 16px;
  padding: 14px 0;
  white-space: nowrap;
}
.cabecalho .marca span { font-weight: 400; opacity: 0.8; font-size: 13px; }
.abas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.abas button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  padding: 16px 12px;
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
.abas button:hover { color: var(--branco); }
.abas button.ativa { color: var(--branco); border-bottom-color: #5aa7cf; }
.usuario-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  padding: 10px 0;
}
.usuario-info .papel {
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.usuario-info button {
  background: rgba(255,255,255,0.12);
  color: var(--branco);
  border: none;
  padding: 6px 12px;
  font-size: 12.5px;
}
.usuario-info button:hover { background: rgba(255,255,255,0.22); }

/* ---------- Conteúdo ---------- */
main { flex: 1; padding: 20px; max-width: 1180px; width: 100%; margin: 0 auto; }

.barra-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.barra-topo h2 { margin: 0; font-size: 19px; color: var(--azul-escuro); }
.barra-topo p.legenda { margin: 2px 0 0; color: var(--cinza-texto); font-size: 13px; }

.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 16px;
}

.filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.filtros .campo { flex: 1; min-width: 160px; }
.filtros .campo label { margin: 0 0 5px; }
.filtros .campo-busca { flex: 2; min-width: 220px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cinza-borda); }
th { color: var(--cinza-texto); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--azul-claro); }
.linha-clicavel:hover { background: var(--azul-claro); }

.crachá, .badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-acabado { background: #e3f1ea; color: var(--verde); }
.badge-semi { background: #fdf1de; color: #92650f; }
.badge-linha { background: var(--azul-claro); color: var(--azul); }
.badge-ativo { background: #e3f1ea; color: var(--verde); }
.badge-inativo { background: #f1e9e8; color: var(--vermelho); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: var(--cinza-texto);
}
.paginacao .botoes { display: flex; gap: 8px; }

.vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--cinza-texto);
}

.carregando { padding: 24px; text-align: center; color: var(--cinza-texto); font-size: 13.5px; }

/* ---------- Detalhe de fórmula ---------- */
.detalhe-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}
.detalhe-titulo { min-width: 220px; }
.detalhe-titulo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detalhe-titulo-linha h2 { margin: 0; font-size: 22px; color: var(--azul-escuro); }
.detalhe-titulo p.legenda { margin: 4px 0 0; color: var(--cinza-texto); font-size: 13.5px; }
.detalhe-acoes { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.detalhe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cinza-borda);
}
.detalhe-grid .item .rotulo { font-size: 11px; text-transform: uppercase; color: var(--cinza-texto); letter-spacing: 0.03em; margin-bottom: 3px; }
.detalhe-grid .item .valor { font-size: 14px; font-weight: 600; }

.linha-composicao { display: grid; grid-template-columns: 1.3fr 1.3fr 0.7fr 0.7fr 0.7fr 1.3fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.linha-composicao input, .linha-composicao select { padding: 7px 9px; font-size: 13px; }

.linha-parametro { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.6fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.linha-parametro input { padding: 7px 9px; font-size: 13px; }

.tabela-embalagem { margin-top: 18px; }
.resumo-custo-geral {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--azul-claro);
  border-radius: var(--raio);
  font-size: 13.5px;
  color: var(--azul-escuro);
}
.resumo-custo-geral .linha-resumo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 3px 0;
}
.resumo-custo-geral .linha-resumo span { opacity: 0.85; }
.resumo-custo-geral .linha-resumo strong { white-space: nowrap; text-align: right; }
.resumo-custo-geral .linha-final { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.12); font-size: 15px; }
.resumo-custo-geral .linha-cambio-ref { font-size: 12px; opacity: 0.85; }
.subtitulo-embalagem { font-size: 13px; font-weight: 600; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: 0.03em; margin: 18px 0 8px; padding-top: 14px; border-top: 1px dashed var(--cinza-borda); }
.linha-formula-ref td { background: var(--cinza-fundo); }
.linha-total td { border-top: 2px solid var(--cinza-borda); padding-top: 10px; }

.mp-clicavel { cursor: pointer; }
.mp-clicavel:hover { text-decoration: underline; text-decoration-color: var(--azul); }
.linha-fornecedores { font-size: 11px; color: var(--cinza-texto); margin-top: 2px; }
.linha-secundaria { font-size: 11px; color: var(--cinza-texto); margin-top: 2px; font-style: italic; }
.forn-row-exibicao { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cinza-fundo); font-size: 13.5px; }
.forn-row-exibicao:last-child { border-bottom: none; }

.forn-sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 2px;
}
.forn-sugestoes:empty { display: none; }
.forn-sugestao-item { padding: 8px 11px; font-size: 13.5px; cursor: pointer; }
.forn-sugestao-item:hover { background: var(--azul-claro); }

.linha-montador { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linha-montador select { padding: 7px 9px; font-size: 13px; }

.rodape-form { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.voltar { background: none; border: none; color: var(--azul); font-weight: 600; padding: 0 0 12px; font-size: 13.5px; }

.aviso-caixa {
  background: var(--azul-claro);
  border: 1px solid #bcdcec;
  color: var(--azul-escuro);
  border-radius: var(--raio);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* No celular, a tabela continua sendo uma tabela de verdade (colunas
   alinhadas) — só que dentro de uma faixa com scroll lateral, pra não
   espremer o conteúdo nem quebrar o layout. Arrasta pro lado pra ver as
   colunas que não couberem na largura da tela. */
.tabela-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-scroll table {
  min-width: 420px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
/* Visual de planilha pra composição: cabeçalho com fundo, colunas com
   divisórias verticais leves e números alinhados à direita — bem mais fácil
   de ler numa lista de matéria-prima/%  do que texto todo à esquerda. */
.tabela-scroll th {
  background: var(--cinza-fundo);
  border-bottom: 2px solid var(--cinza-borda);
  white-space: nowrap;
}
/* Rótulo curto só aparece no celular (a versão longa continua sendo o
   padrão em telas largas) — evita cabeçalho de tabela quebrando em 2-3
   linhas numa coluna estreita. */
.only-mobile { display: none; }
.tabela-scroll th, .tabela-scroll td {
  border-right: 1px solid var(--cinza-fundo);
}
.tabela-scroll th:last-child, .tabela-scroll td:last-child { border-right: none; }
.tabela-scroll .col-num, .tabela-scroll th.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-scroll tbody tr:nth-child(even) td { background: #fafbfc; }
.tabela-scroll tbody tr:hover td { background: var(--azul-claro); }
.tabela-scroll .linha-total td { background: var(--cinza-fundo); }

@media (max-width: 640px) {
  .linha-composicao { grid-template-columns: 1fr 1fr; }
  .linha-parametro { grid-template-columns: 1fr 1fr; }
  main { padding: 12px; }
  th, td { padding: 8px 9px; font-size: 12.5px; }
  /* O objetivo aqui é encolher tudo proporcionalmente — o mesmo layout do
     desktop, só menor — em vez de reformatar em algo diferente (colunas
     empilhadas de outro jeito, texto centralizado etc.). Só os espaçamentos
     e alguns tamanhos de fonte encolhem; a estrutura (grid, flex) é a
     mesma de sempre, que já se ajusta sozinha por ser responsiva. */
  .cartao { padding: 14px; }
  .modal-fundo { padding: 10px; }
  .modal-caixa { padding: 16px; max-height: 92vh; }
  .detalhe-titulo-linha h2 { font-size: 19px; }
  .barra-topo h2 { font-size: 17px; }
  .cabecalho { padding: 0 12px; }
  .cabecalho .marca { font-size: 14px; }

  /* Composição química/embalagem: no celular esconde o "#" (baixo valor,
     ocupa espaço) e o código de sistema antes do nome de cada item (ex:
     "R01.028 —"), trocando pela versão curta dos rótulos das colunas de
     custo. Sem essas colunas de baixo valor, a tabela quase sempre cabe
     inteira na largura da tela — sem quebrar o nome da matéria-prima em
     3-4 linhas nem cortar o cabeçalho na borda. */
  .col-ordem { display: none; }
  .only-desktop { display: none; }
  .only-mobile { display: inline; }
  .tabela-scroll table { min-width: 0; }
  .tabela-scroll th, .tabela-scroll td { padding: 7px 6px; }
}

/* ---------- Modal genérico ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(16, 30, 44, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 300;
}
.modal-caixa {
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 22px; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-caixa h3 { margin: 0 0 12px; font-size: 16px; color: var(--azul-escuro); }
.modal-corpo { font-size: 13.5px; }
.modal-corpo .kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.modal-msg:empty { display: none; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Ajuste de composição / histórico ---------- */
.linha-mp-ajustavel { cursor: pointer; }
.linha-mp-ajustavel:hover td { background: var(--azul-claro); }
.resultado-ajuste { background: var(--cinza-fundo); border-radius: var(--raio); padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.resultado-ajuste.aviso { background: #fbeceb; color: var(--vermelho); }
.historico-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cinza-fundo); font-size: 13px; }
.historico-linha:last-child { border-bottom: none; }
.cambio-caixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--azul-claro); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; }
.cambio-caixa label { margin: 0; }
.cambio-caixa input { width: 110px; }
.cambio-historico label { display: block; margin: 0 0 6px; }
.cambio-historico input[type="date"] { padding: 6px 9px; font-size: 13px; }
.excecao-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--cinza-borda); font-size: 12.5px; }

/* ---------- Rodapé com a versão publicada (pra conferir se um deploy pegou) ---------- */
#rodape-versao {
  position: fixed;
  bottom: 4px;
  right: 8px;
  font-size: 10.5px;
  color: var(--cinza-texto);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
#rodape-versao:empty { display: none; }

/* ---------- Ambiente de TESTE (faixa laranja + cabeçalho diferente) ---------- */
#faixa-ambiente {
  background: #e8710a;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
body.ambiente-teste .cabecalho { background: #7a3d0a; }
body.ambiente-teste .cartao-login { border-top: 5px solid #e8710a; }
.seletor-ambiente {
  width: 100%;
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 14px;
  background: var(--branco);
}