:root {
  --laranja: #f3901e;
  --laranja-escuro: #d97a0f;
  --label-cor: #b06a1f;
  --input-bg: #e7ecf8;
  --fundo: #eef0f3;
  --cartao: #ffffff;
  --borda: #dde2ea;
  --texto: #2b3550;
  --texto-suave: #6b7690;
  --verde: #1a7a4c;
  --vermelho: #b3261e;
  font-family: 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); }
.oculto { display: none !important; }

/* Login */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo);
}
.cartao-login {
  background: var(--cartao);
  padding: 2.2rem 2.5rem 2.5rem;
  border-radius: 18px;
  width: 340px;
  box-shadow: 0 10px 34px rgba(43, 53, 80, 0.14);
}
.logos-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.logo-elite { height: 46px; width: auto; }
.logo-irontech { height: 40px; width: auto; }
.divisor-logo { width: 1px; height: 36px; background: var(--borda); }
.subtitulo { margin: 0 0 1.4rem; color: #56607a; font-size: 0.95rem; font-weight: 600; }
.cartao-login label { display: block; margin: 0.9rem 0 0.35rem; font-size: 0.85rem; color: var(--label-cor); font-weight: 600; }
.cartao-login input {
  width: 100%; padding: 0.65rem 0.8rem; border: 1.5px solid transparent;
  border-radius: 10px; font-size: 1rem; background: var(--input-bg); color: var(--texto);
}
.cartao-login input:focus { outline: none; border-color: var(--texto); background: #fff; }
.cartao-login button {
  margin-top: 1.4rem; width: 100%; padding: 0.75rem; background: var(--laranja);
  color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.cartao-login button:hover { background: var(--laranja-escuro); }
.erro { color: var(--vermelho); font-size: 0.85rem; min-height: 1.2em; margin-top: 0.6rem; }

.modal-fundo {
  position: fixed; inset: 0; background: rgba(43, 53, 80, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}

/* App shell */
.topo {
  background: var(--cartao);
  color: var(--texto);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: 60px;
  gap: 2rem;
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; }
.marca-logo { height: 34px; width: auto; }
.abas { display: flex; gap: 0.3rem; flex: 1; }
.aba-btn {
  background: transparent; border: none; color: var(--texto-suave);
  padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
.aba-btn.ativa, .aba-btn:hover { background: var(--laranja); color: #fff; }
.usuario-area { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: var(--texto-suave); }
.btn-link { background: none; border: none; color: var(--laranja); cursor: pointer; text-decoration: underline; font-size: 0.85rem; }

.conteudo { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 1.2rem; margin-top: 1rem; box-shadow: 0 2px 10px rgba(43, 53, 80, 0.05); }

.painel-xml { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.painel-xml:first-child { margin-top: 0; }
.botao-arquivo {
  background: var(--laranja); color: #fff; padding: 0.55rem 1.1rem; border-radius: 10px;
  cursor: pointer; font-size: 0.9rem; font-weight: 600; position: relative;
}
.botao-arquivo.secundario { background: #56607a; }
.botao-arquivo.terciario { background: #2f8f80; }
.botao-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#xml-status { font-size: 0.85rem; color: var(--texto-suave); }

.linha { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.linha-checks { gap: 1.5rem; }
.campo { display: flex; flex-direction: column; min-width: 150px; flex: 1; }
.campo-largo { flex: 2; min-width: 260px; }
.campo-pequeno { flex: 0.6; min-width: 120px; }
.campo label { font-size: 0.8rem; color: var(--label-cor); font-weight: 600; margin-bottom: 0.3rem; }
.campo input, .campo select {
  padding: 0.55rem 0.7rem; border: 1.5px solid transparent; border-radius: 10px; font-size: 0.95rem;
  background: var(--input-bg); color: var(--texto);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--texto); background: #fff; }
.check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }

.btn-principal {
  background: var(--laranja); color: #fff; border: none; padding: 0.75rem 1.4rem;
  border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 0.5rem;
}
.btn-principal:hover { background: var(--laranja-escuro); }
.status { font-size: 0.9rem; min-height: 1.2em; margin-top: 0.5rem; }
.status.ok { color: var(--verde); }
.status.erro { color: var(--vermelho); }

.filtros { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros select, .filtros input[type="text"] { padding: 0.5rem 0.7rem; border: 1.5px solid transparent; border-radius: 10px; background: var(--input-bg); font-size: 0.9rem; }
.filtros input[type="text"] { min-width: 220px; flex: 1; }
.filtros button {
  background: var(--laranja); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 600;
}
.filtros button:hover { background: var(--laranja-escuro); }

.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); }
.tabela th, .tabela td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--borda); font-size: 0.88rem; }
.tabela th { background: #f5f6f9; color: var(--texto-suave); font-weight: 700; }
.tabela tr:hover td { background: #fbfaf8; }
.linha-total td { border-top: 2px solid var(--laranja); background: #fdf3e7; }
.linha-total:hover td { background: #fdf3e7; }
.linha-autenticada td { background: #e9f6ef; }
.linha-autenticada:hover td { background: #ddf0e5; }
.chk-autenticado { accent-color: var(--laranja-escuro); width: 16px; height: 16px; cursor: pointer; }
.tabela tfoot td { border-top: 2px solid var(--laranja); background: #fdf3e7; font-weight: 700; }
.pct-positivo { color: var(--verde); font-weight: 600; }
.pct-negativo { color: var(--vermelho); font-weight: 600; }
.link-excluir { color: var(--vermelho); cursor: pointer; font-size: 0.85rem; }

.grade-relatorios { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.grade-relatorios .cartao h3 { margin-top: 0; font-size: 1rem; color: var(--label-cor); }

.toggle-periodo { display: flex; background: var(--input-bg); border-radius: 10px; padding: 3px; gap: 2px; }
.toggle-btn { background: transparent; border: none; padding: 0.45rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--texto-suave); font-size: 0.9rem; }
.toggle-btn.ativa { background: var(--laranja); color: #fff; }

.tabs-tipo-relatorio {
  display: flex; gap: 0; border-bottom: 2px solid var(--borda); margin: 1rem 0 0;
}
.tipo-btn {
  background: var(--cartao); border: 1px solid var(--borda); border-bottom: none;
  padding: 0.6rem 1.3rem; cursor: pointer; font-weight: 600; color: var(--texto-suave);
  border-radius: 10px 10px 0 0; margin-right: 4px; margin-bottom: -2px; font-size: 0.92rem;
}
.tipo-btn.ativa { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.tipo-btn:hover:not(.ativa) { background: var(--input-bg); }

.resumo-meta { display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline; margin-bottom: 0.5rem; }
.resumo-meta .valor-grande { font-size: 1.4rem; font-weight: 700; color: var(--texto); }
.resumo-meta .rotulo-meta { font-size: 0.8rem; color: var(--texto-suave); display: block; }
.resumo-meta .pct-positivo { color: var(--verde); }
.resumo-meta .pct-negativo { color: var(--vermelho); }
.barra-progresso { background: var(--input-bg); border-radius: 999px; height: 10px; width: 100%; max-width: 320px; overflow: hidden; margin-top: 0.3rem; }
.barra-progresso-preenchida { background: var(--laranja); height: 100%; border-radius: 999px; }
#linha-inputs-metas .campo { min-width: 90px; }
#linha-inputs-metas .campo label { font-size: 0.72rem; }

.cartao h3 { margin-top: 0; font-size: 1rem; color: var(--label-cor); }

.linha-grafico-tabela { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.linha-grafico-tabela .grafico { flex: 1 1 auto; min-width: 300px; }
.tabela-lateral { flex: 0 0 220px; max-width: 260px; }

.grafico { margin: 0.5rem 0 1rem; overflow-x: auto; }
.grafico svg { display: block; }
.barra { fill: var(--laranja); }
.barra:hover { fill: var(--laranja-escuro); }
.barra-com-st { fill: #56607a; }
.barra-meta-verde { fill: var(--verde); }
.barra-meta-verde:hover { fill: #14603b; }
.barra-meta-vermelha { fill: var(--vermelho); }
.barra-meta-vermelha:hover { fill: #8c1e18; }
.barra-rotulo { font-size: 11px; fill: var(--texto-suave); }
.barra-valor { font-size: 11px; fill: var(--texto); font-weight: 600; }
.legenda-grafico { display: flex; gap: 1.2rem; font-size: 0.82rem; color: var(--texto-suave); margin-top: 0.4rem; }
.legenda-item { display: flex; align-items: center; gap: 0.35rem; }
.legenda-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

@media (max-width: 800px) {
  .grade-relatorios { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; height: auto; padding: 0.6rem 1rem; }
}