/* ===================================================================
   ONIX Estoque — estilos específicos de telas (venda, contagem, furo).
   Ainda 100% via tokens.
   =================================================================== */

/* ---------- Input avulso (componente Input) ---------- */
.inp {
  width: 100%; background: var(--cor-card); border: 1px solid var(--cor-borda);
  color: var(--cor-texto); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm);
  font-size: var(--fs-md); outline: none; transition: border-color var(--transicao);
}
.inp:focus { border-color: var(--cor-marca); }

/* ---------- Tela de venda: grade de tiles ---------- */
.venda-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-4);
}
.btn.tile {
  flex-direction: column; align-items: flex-start; gap: var(--esp-1);
  padding: var(--esp-5); min-height: 96px; text-align: left;
  border-radius: var(--raio); background: var(--cor-card);
}
.btn.tile:hover { border-color: var(--cor-marca); background: var(--cor-card-hover); }
.btn.tile:active { transform: scale(.98); }
.tile-titulo { font-size: var(--fs-md); font-weight: var(--peso-bold); color: var(--cor-texto); }
.tile-sub { font-size: var(--fs-base); color: var(--cor-marca); font-weight: var(--peso-semi); margin-top: auto; }
.tile-nota { font-size: var(--fs-xs); color: var(--cor-texto-3); font-weight: var(--peso-medio); margin-top: 2px; }
.tile-nota.esgotado { color: var(--cor-vermelho); font-weight: var(--peso-semi); }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; justify-content: center; gap: var(--esp-5); margin: var(--esp-4) 0; }
.btn.stepper {
  width: 56px; height: 56px; border-radius: var(--raio-full); font-size: var(--fs-2xl);
  padding: 0; background: var(--cor-card); font-weight: var(--peso-bold);
}
.btn.stepper:hover { border-color: var(--cor-marca); }
.stepper-num { font-size: var(--fs-2xl); font-weight: var(--peso-black); min-width: 56px; text-align: center; }
.stepper-total { text-align: center; font-size: var(--fs-xl); font-weight: var(--peso-bold); color: var(--cor-marca); }

/* ---------- Tela de contagem ---------- */
.contagem-lista { display: flex; flex-direction: column; gap: var(--esp-2); margin: var(--esp-4) 0 var(--esp-6); }
.contagem-row {
  display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-sm);
  background: var(--cor-card);
}
.cr-nome { font-weight: var(--peso-semi); font-size: var(--fs-md); }
.contagem-row .inp { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Painel "Vendas de hoje" ---------- */
.hoje { margin-top: var(--esp-8); border-top: 1px solid var(--cor-borda); padding-top: var(--esp-5); }
.hoje-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); flex-wrap: wrap; }
.hoje-head h3 { font-size: var(--fs-lg); font-weight: var(--peso-bold); }
.hoje-total { font-size: var(--fs-base); color: var(--cor-marca); font-weight: var(--peso-semi); }
.hoje-vazio { color: var(--cor-texto-3); font-size: var(--fs-base); }
.hoje-lista { display: flex; flex-direction: column; }
.hoje-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto auto; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-2); border-bottom: 1px solid var(--cor-borda-suave);
}
.hoje-row:last-child { border-bottom: none; }
.hr-qtd { font-weight: var(--peso-bold); color: var(--cor-marca); font-variant-numeric: tabular-nums; }
.hr-nome { font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-forma { font-size: var(--fs-xs); color: var(--cor-texto-2); background: var(--cor-card); border: 1px solid var(--cor-borda-suave); padding: 2px var(--esp-2); border-radius: var(--esp-2); white-space: nowrap; }
.hr-hora { color: var(--cor-texto-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hr-val { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }

/* Título de seção (fechamento, painel) */
.secao-titulo { font-size: var(--fs-lg); font-weight: var(--peso-bold); margin: var(--esp-8) 0 var(--esp-4); }
.secao-titulo:first-child { margin-top: 0; }

/* Forma de pagamento no modal de venda */
.pg-label { font-size: var(--fs-sm); color: var(--cor-texto-2); font-weight: var(--peso-medio); margin: var(--esp-4) 0 var(--esp-2); text-align: center; }
.pg-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.pg-botoes .btn { padding: var(--esp-4) var(--esp-2); }

/* Ações do fechamento de caixa */
.fechar-acoes { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-6); }

/* Botão grande e centralizado para fechar o caixa (tela de venda) */
.fechar-caixa-area { display: flex; justify-content: center; margin-top: var(--esp-10); }
.fechar-caixa-area .btn {
  width: 100%; max-width: 380px; padding: var(--esp-5) var(--esp-6);
  font-size: var(--fs-md); border-width: 2px;
}

/* Relatórios */
.nota-relatorio { color: var(--cor-texto-3); font-size: var(--fs-sm); line-height: 1.5; margin: var(--esp-3) 0 0; }
.repor { color: var(--cor-vermelho); font-weight: var(--peso-semi); }
.card-delta { font-size: var(--fs-xs); font-weight: var(--peso-semi); margin-top: var(--esp-1); }
.card-delta.pos { color: var(--cor-verde); }
.card-delta.neg { color: var(--cor-vermelho); }

/* Gráfico de barras (vendas por dia da semana) */
.semana-chart { display: flex; align-items: flex-end; gap: var(--esp-2); height: 150px; padding: var(--esp-3) 0; }
.semana-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); justify-content: flex-end; height: 100%; }
.semana-bar { width: 66%; max-width: 42px; min-height: 3px; border-radius: 6px 6px 0 0; background: var(--cor-marca); opacity: .4; transition: opacity var(--transicao); }
.semana-col.pico .semana-bar { opacity: 1; }
.semana-col small { color: var(--cor-texto-3); font-size: var(--fs-xs); }
.semana-col.pico small { color: var(--cor-marca); font-weight: var(--peso-semi); }

/* Controle de caixa na barra superior */
.caixa-ctrl { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.caixa-info { display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto-2); }
.caixa-info svg { color: var(--cor-marca); }
.caixa-nome { font-weight: var(--peso-semi); font-size: var(--fs-base); color: var(--cor-texto); }
.caixa-hora { font-size: var(--fs-xs); color: var(--cor-texto-3); }

/* ---------- Dashboard do Início ---------- */
.kpis { margin-bottom: var(--esp-5); }
.kpis .card .value { font-size: var(--fs-xl); }

.alerta {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  border-radius: var(--raio); padding: var(--esp-4) var(--esp-5);
  margin-bottom: var(--esp-6); border: 1px solid var(--cor-borda);
}
.alerta-ic { flex: none; display: grid; place-items: center; }
.alerta-titulo { font-weight: var(--peso-bold); font-size: var(--fs-md); }
.alerta-sub { color: var(--cor-texto-2); font-size: var(--fs-sm); margin-top: 2px; line-height: 1.45; }
.alerta-furo { background: var(--cor-vermelho-suave); border-color: var(--cor-vermelho-borda); }
.alerta-furo .alerta-ic { color: var(--cor-vermelho); }
.alerta-ok { background: var(--cor-verde-suave); border-color: var(--cor-borda); }
.alerta-ok .alerta-ic { color: var(--cor-verde); }

.comprar-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-2); }
.comprar-card {
  background: var(--cor-card); border: 1px solid var(--cor-borda); border-left-width: 4px;
  border-radius: var(--raio-sm); padding: var(--esp-4);
}
.comprar-card.esgotado { border-left-color: var(--cor-vermelho); }
.comprar-card.baixo { border-left-color: var(--cor-amarelo-alerta); }
.comprar-card.abastecer { border-left-color: var(--cor-azul); }
.cc-nome { font-weight: var(--peso-semi); font-size: var(--fs-md); }
.cc-info { color: var(--cor-texto-2); font-size: var(--fs-sm); margin-top: 3px; display: flex; gap: var(--esp-2); align-items: baseline; }
.cc-min { color: var(--cor-texto-3); font-size: var(--fs-xs); }

/* Dica curta acima da grade (ex.: modo Abastecer da recepção) */
.modo-dica {
  color: var(--cor-texto-2); font-size: var(--fs-sm); line-height: 1.45;
  margin: 0 0 var(--esp-3);
}

/* ---------- Dashboard de furo ---------- */
.furo-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.furo-secao { margin-top: var(--esp-6); }
.furo-secao:first-of-type { margin-top: var(--esp-2); }
.furo-cards { margin-bottom: var(--esp-6); }
.info-linha { display: flex; justify-content: space-between; padding: var(--esp-2) 0; font-size: var(--fs-base); color: var(--cor-texto-2); border-top: 1px solid var(--cor-borda-suave); }
.info-linha:first-child { border-top: none; }
.info-linha b { color: var(--cor-texto); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .stepper-btn { width: 64px; height: 64px; }
  .contagem-row { grid-template-columns: 1fr 96px; }
}