/* Painel ArteReal Móveis Rústicos
   Paleta puxada da marca: madeira, couro e verde folha. */

:root {
  --madeira-escura: #4a3728;
  --madeira: #6b5240;
  --madeira-clara: #a0866b;
  --areia: #f5f0e8;
  --areia-escura: #e6ddd0;
  --papel: #ffffff;
  --texto: #2d2419;
  --texto-suave: #6b6355;
  --verde: #4a6b3f;
  --verde-claro: #e8f0e5;
  --vermelho: #a8402f;
  --vermelho-claro: #f8e8e5;
  --ambar: #b8863b;
  --ambar-claro: #fdf3e0;
  --borda: #ddd3c4;
  --sombra: 0 1px 3px rgba(45, 36, 25, 0.12);
  --sombra-alta: 0 8px 24px rgba(45, 36, 25, 0.18);
  --raio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--areia);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
}

.oculto { display: none !important; }

/* ---------- Entrada ---------- */

.login-fundo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(160deg, var(--madeira-escura), var(--madeira));
}

.login-caixa {
  background: var(--papel);
  padding: 36px 28px;
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  width: 100%;
  max-width: 380px;
}

.marca {
  margin: 0;
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--madeira-escura);
}

.marca-sub {
  margin: 2px 0 28px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 16px; /* 16px evita o zoom automático do iPhone ao focar */
  font-family: inherit;
  background: var(--papel);
  color: var(--texto);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--madeira);
  outline-offset: -1px;
  border-color: var(--madeira);
}

textarea { min-height: 80px; resize: vertical; }

.erro {
  color: var(--vermelho);
  font-size: 14px;
  margin: 12px 0 0;
  min-height: 20px;
}

/* ---------- Botões ---------- */

.botao {
  padding: 11px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--texto);
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, background .15s;
}

.botao:hover:not(:disabled) { background: var(--areia-escura); }
.botao:disabled { opacity: .55; cursor: not-allowed; }

.botao-principal {
  width: 100%;
  background: var(--madeira-escura);
  border-color: var(--madeira-escura);
  color: #fff;
}
.botao-principal:hover:not(:disabled) { background: var(--madeira); }

.botao-acao {
  background: var(--madeira-escura);
  border-color: var(--madeira-escura);
  color: #fff;
  width: auto;
}
.botao-acao:hover:not(:disabled) { background: var(--madeira); }

.botao-perigo { color: var(--vermelho); border-color: #e5c9c3; }
.botao-perigo:hover:not(:disabled) { background: var(--vermelho-claro); }

.botao-pequeno { padding: 6px 12px; font-size: 13px; }

/* ---------- Estrutura ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--madeira-escura);
  color: #fff;
  box-shadow: var(--sombra);
}

.topo-marca { font-weight: 700; letter-spacing: 1px; flex: 1; }

.botao-menu, .botao-sair {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: var(--raio);
  padding: 6px 12px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.botao-menu:hover, .botao-sair:hover { background: rgba(255,255,255,.12); }

.menu {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--madeira);
  overflow-x: auto;
}

.menu a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--raio);
  font-size: 15px;
  white-space: nowrap;
}

.menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.menu a.ativo { background: var(--areia); color: var(--madeira-escura); font-weight: 600; }

.conteudo { padding: 20px 16px 60px; max-width: 1100px; margin: 0 auto; }

/* ---------- Cabeçalho de página ---------- */

.pagina-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pagina-topo h1 { margin: 0; font-size: 24px; color: var(--madeira-escura); }

.barra-filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.barra-filtros input, .barra-filtros select { margin-bottom: 0; width: auto; flex: 1; min-width: 150px; }

/* ---------- Cartões de resumo ---------- */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}

.cartao-rotulo {
  font-size: 13px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.cartao-valor { font-size: 26px; font-weight: 700; color: var(--madeira-escura); }
.cartao-valor.alerta { color: var(--vermelho); }
.cartao-valor.bom { color: var(--verde); }

/* ---------- Listas ---------- */

.lista { display: flex; flex-direction: column; gap: 10px; }

.item {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-info { flex: 1; min-width: 200px; }
.item-titulo { font-weight: 600; margin-bottom: 3px; }
.item-detalhe { font-size: 14px; color: var(--texto-suave); }
.item-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--texto-suave);
  background: var(--papel);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}

/* ---------- Etiquetas de status ---------- */

.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.etiqueta-neutra  { background: var(--areia-escura); color: var(--texto-suave); }
.etiqueta-espera  { background: var(--ambar-claro);  color: var(--ambar); }
.etiqueta-boa     { background: var(--verde-claro);  color: var(--verde); }
.etiqueta-ruim    { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- Dinheiro ---------- */

.dinheiro { font-variant-numeric: tabular-nums; font-weight: 600; }
.dinheiro-grande { font-size: 18px; }

/* ---------- Janela ---------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(45, 36, 25, .55);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 50;
  overflow-y: auto;
}

.modal {
  background: var(--papel);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sombra-alta);
}

.modal-topo {
  position: sticky;
  top: 0;
  background: var(--papel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--borda);
}

.modal-topo h2 { margin: 0; font-size: 19px; color: var(--madeira-escura); }

.modal-fechar {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
  padding: 0 4px;
}

#modal-corpo { padding: 20px; }

.modal-acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---------- Itens do orçamento ---------- */

/* Duas faixas por item: a de cima com o essencial (descrição, quantidade,
   preço) e a de baixo com código e medida, que vão para o orçamento impresso
   mas não atrapalham quem só quer lançar rápido. */
.item-orcamento {
  display: grid;
  grid-template-columns: 1fr 70px 110px auto;
  gap: 6px;
  align-items: start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--borda);
}

.item-orcamento input { margin-bottom: 0; }

.item-orcamento .campo-codigo { grid-column: 1 / 2; }
.item-orcamento .campo-unidade { grid-column: 2 / -1; }

.item-orcamento .campo-codigo,
.item-orcamento .campo-unidade {
  font-size: 14px;
  padding: 7px 10px;
  background: var(--areia);
}

/* Meio de pagamento com o parcelamento ao lado. Embaixo, o campo de vezes
   ficava fora da tela no celular e parecia que não tinha aparecido. */
.linha-meio {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.linha-meio select { margin-bottom: 0; }
.linha-meio select:first-child { flex: 1 1 auto; min-width: 0; }
.linha-meio select:last-child:not(:first-child) { flex: 0 0 96px; }

/* Forma de pagamento e parcelamento lado a lado, cada um com seu rótulo.
   Sem o rótulo próprio, o seletor de vezes parecia um pedaço solto do campo
   ao lado e passava despercebido. */
.par-pagamento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.par-pagamento.com-parcelas { grid-template-columns: 1.4fr 1fr; }
.par-pagamento label { margin-bottom: 4px; }
.par-pagamento select { margin-bottom: 0; }

/* ---------- Meta do mês ---------- */

.meta {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--ambar);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--sombra);
}

.meta-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.meta-rotulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-suave);
}

.meta-percentual {
  font-size: 26px;
  font-weight: 700;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}

.meta-percentual.bateu { color: var(--verde); }

.meta-barra {
  height: 10px;
  background: var(--areia-escura);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.meta-preenchida {
  height: 100%;
  background: var(--ambar);
  border-radius: 999px;
  transition: width .4s ease-out;
}

.meta-preenchida.bateu { background: var(--verde); }

.meta-numeros {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--texto-suave);
}

.meta-numeros strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- Calculadora de mesa ---------- */

.calculadora {
  background: var(--ambar-claro);
  border: 1px solid #ecd9b0;
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 18px;
}

.calculadora-titulo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ambar);
  margin-bottom: 10px;
}

.calculadora-campos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.calculadora-campos input { margin-bottom: 10px; }

.calculadora-resultado {
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.calculadora-preco {
  font-size: 24px;
  font-weight: 700;
  color: var(--madeira-escura);
  font-variant-numeric: tabular-nums;
}

.calculadora-conta { font-size: 12px; line-height: 1.6; margin-top: 2px; }

/* Uma linha por pedaço de madeira da peça */
.parte {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr auto;
  gap: 6px;
  margin-bottom: 6px;
}

.parte input {
  margin-bottom: 0;
  font-size: 14px;
  padding: 7px 9px;
}

@media (max-width: 640px) {
  /* Cinco colunas não cabem no celular: nome em cima, medidas embaixo. */
  .parte { grid-template-columns: 1fr 1fr 1fr auto; }
  .parte .parte-nome { grid-column: 1 / -1; }
}

.totais {
  background: var(--areia);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin-top: 16px;
}

.totais-linha {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 15px;
}

.totais-linha.total {
  border-top: 1px solid var(--borda);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--madeira-escura);
}

/* ---------- Avisos ---------- */

.avisos {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 420px;
}

.aviso {
  padding: 13px 16px;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  font-size: 15px;
  animation: surgir .2s ease-out;
}

.aviso-ok   { background: var(--verde); color: #fff; }
.aviso-erro { background: var(--vermelho); color: #fff; }

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

.carregando { text-align: center; padding: 40px; color: var(--texto-suave); }

/* ---------- Celular ---------- */

@media (max-width: 640px) {
  .conteudo { padding: 16px 12px 60px; }
  .pagina-topo h1 { font-size: 21px; }
  .cartoes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .cartao-valor { font-size: 22px; }

  /* O menu vira gaveta: numa tela pequena os seis links não cabem lado a lado. */
  .menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    flex-direction: column;
    width: 220px;
    padding: 16px 12px;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: var(--sombra-alta);
    overflow-y: auto;
  }

  .menu.aberto { transform: translateX(0); }
  .menu a { padding: 13px 14px; font-size: 16px; }

  .item { flex-direction: column; }
  .item-acoes { width: 100%; }

  /* Empilha os campos do item: 4 colunas não cabem em 360px de tela. */
  .item-orcamento { grid-template-columns: 1fr 1fr; }
  .item-orcamento .campo-descricao { grid-column: 1 / -1; }
}

@media (min-width: 641px) {
  .botao-menu { display: none; }
}