/* ================================================================
   PARMOON — Folha de Estilos Principal
   Arquivo: parmoon.css
   
   Estrutura deste arquivo:
   1. Variáveis globais de cor e espaçamento
   2. Reset e estilos base do body
   3. Barra lateral (menu esquerdo)
   4. Área principal (conteúdo da direita)
   5. Barra do topo
   6. Cards de indicadores (KPIs)
   7. Tabelas e barras de ferramentas
   8. Botões
   9. Etiquetas de status (pills)
   10. Cards de gráfico e elementos visuais
   11. Gaveta lateral (drawer)
   12. Formulários dentro da gaveta
   13. Autocompletar de produtos
   14. Caixa de informação automática
   15. Notificação toast
   16. Responsividade mobile
================================================================ */


/* ================================================================
   1. VARIÁVEIS GLOBAIS
   Definidas no :root para reutilização em todo o CSS.
   Alterar aqui muda a cor/tema em todo o sistema.
================================================================ */
:root {
  /* Paleta dourada — usada para destaques e elementos premium */
  --cor-dourado:        #C8A96E;
  --cor-dourado-claro:  #E2C89A;
  --cor-dourado-escuro: #9A7A45;

  /* Fundos em escala de cinza escuro */
  --cor-fundo:          #0D0D0F; /* Fundo principal da página */
  --cor-superficie:     #141418; /* Superfícies de cards e barra lateral */
  --cor-superficie-2:   #1C1C22; /* Superfícies levemente mais claras */
  --cor-superficie-3:   #242430; /* Superfícies de hover e inputs */

  /* Bordas semitransparentes douradas */
  --cor-borda:          rgba(200, 169, 110, 0.15); /* Borda padrão */
  --cor-borda-forte:    rgba(200, 169, 110, 0.35); /* Borda de destaque */

  /* Texto em três níveis de opacidade */
  --cor-texto:          #F0EDE6; /* Texto principal (quase branco) */
  --cor-texto-suave:    #8A8578; /* Texto secundário (cinza médio) */
  --cor-texto-fraco:    #565248; /* Texto desabilitado/placeholder */

  /* Cores semânticas */
  --cor-verde:  #4CAF82; /* Sucesso, lucro positivo, em estoque */
  --cor-vermelho: #E05C5C; /* Erro, perda, estoque zero */
  --cor-azul:   #5B9BD5; /* Informação, datas, receita */
}


/* ================================================================
   2. RESET E BASE
   Remove margens padrão do navegador e define a fonte global
================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Padding e border incluídos no tamanho do elemento */
}

body {
  font-family: 'DM Sans', sans-serif; /* Fonte principal do sistema */
  background: var(--cor-fundo);       /* Fundo escuro da página */
  color: var(--cor-texto);            /* Cor padrão de todo o texto */
  min-height: 100vh;                  /* Garante que ocupa toda a altura */
  font-size: 14px;                    /* Tamanho base da fonte */
}


/* ================================================================
   3. BARRA LATERAL (menu de navegação esquerdo)
================================================================ */

/* Contêiner da barra lateral — fixo na esquerda, ocupa toda a altura */
.barra-lateral {
  position: fixed;        /* Fica fixo ao rolar a página */
  top: 0;
  left: 0;
  width: 220px;           /* Largura da barra lateral */
  height: 100vh;          /* Altura total da tela */
  background: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column; /* Empilha: logo → menu → rodapé */
  z-index: 100;           /* Fica acima do conteúdo principal */
}

/* Área do logotipo no topo da barra lateral */
.logo-topo {
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

/* Nome principal "PARMOON" em fonte serifada dourada */
.logo-nome {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em; /* Espaçamento entre letras para elegância */
  color: var(--cor-dourado);
}

/* Subtítulo abaixo do logotipo */
.logo-subtitulo {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Contêiner do menu de navegação — ocupa o espaço restante */
.menu-navegacao {
  padding: 16px 12px;
  flex: 1; /* Cresce para empurrar o rodapé para baixo */
}

/* Rótulo de seção acima dos itens do menu */
.menu-rotulo {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  padding: 0 12px;
  margin: 8px 0 6px;
}

/* Item individual do menu de navegação */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cor-texto-suave);
  font-size: 13px;
  transition: all 0.15s;   /* Animação suave no hover/ativo */
  margin-bottom: 2px;
  border: 1px solid transparent; /* Borda invisível por padrão */
}

/* Estado hover do item de menu */
.menu-item:hover {
  background: var(--cor-superficie-2);
  color: var(--cor-texto);
}

/* Estado ativo do item de menu (aba selecionada) */
.menu-item.ativo {
  background: rgba(200, 169, 110, 0.08); /* Fundo dourado levemente visível */
  border-color: var(--cor-borda-forte);
  color: var(--cor-dourado);
}

/* Ícone SVG dentro do item do menu */
.menu-icone {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0; /* Não encolhe quando o texto é longo */
}

/* Ícone fica mais opaco quando o item está ativo */
.menu-item.ativo .menu-icone {
  opacity: 1;
}

/* Rodapé da barra lateral com status do sistema */
.barra-lateral-rodape {
  padding: 16px;
  border-top: 1px solid var(--cor-borda);
  font-size: 11px;
  color: var(--cor-texto-fraco);
}

/* Ponto verde de "sistema ativo" ao lado do texto do rodapé */
.ponto-status-ativo {
  width: 6px;
  height: 6px;
  border-radius: 50%;       /* Círculo perfeito */
  background: var(--cor-verde);
  display: inline-block;
  margin-right: 6px;
}


/* ================================================================
   4. ÁREA PRINCIPAL
   Conteúdo à direita da barra lateral
================================================================ */

/* Contêiner da área principal — empurrado para a direita pela barra lateral */
.area-principal {
  margin-left: 220px; /* Mesmo valor da largura da barra lateral */
  min-height: 100vh;
}

/* Área de padding ao redor do conteúdo das abas */
.area-conteudo {
  padding: 28px;
}

/* Cada painel de aba fica oculto por padrão */
.painel-aba {
  display: none;
}

/* Apenas a aba com a classe "ativo" fica visível */
.painel-aba.ativo {
  display: block;
}


/* ================================================================
   5. BARRA DO TOPO
   Faixa fixa no topo com título da página e data
================================================================ */

/* Barra do topo — fica fixada ao topo ao rolar */
.barra-topo {
  height: 56px;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky; /* Gruda no topo ao fazer scroll */
  top: 0;
  z-index: 50; /* Fica acima do conteúdo mas abaixo da gaveta */
}

/* Título da aba atual na barra do topo */
.titulo-pagina-topo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--cor-texto);
  letter-spacing: 0.04em;
}

/* Agrupamento de elementos no lado direito da barra do topo */
.barra-topo-direita {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Etiqueta de data no canto superior direito */
.etiqueta-data {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(200, 169, 110, 0.1);
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-dourado);
  letter-spacing: 0.06em;
}

/* Etiqueta dourada genérica (usada em contagens e status) */
.etiqueta-dourada {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(200, 169, 110, 0.1);
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-dourado);
  letter-spacing: 0.06em;
}


/* ================================================================
   6. CARDS DE INDICADORES (KPIs)
   Cards com números-resumo no topo das páginas
================================================================ */

/* Grade responsiva de cards de indicadores */
.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Ajusta automaticamente */
  gap: 14px;
  margin-bottom: 28px;
}

/* Card individual de indicador */
.card-indicador {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden; /* Necessário para o pseudo-elemento ::before */
}

/* Linha dourada decorativa no topo de cada card */
.card-indicador::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cor-dourado), transparent);
  opacity: 0.5;
}

/* Rótulo descritivo acima do valor do indicador */
.card-indicador-rotulo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 10px;
}

/* Valor principal do indicador — fonte serifada grande */
.card-indicador-valor {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--cor-texto);
  line-height: 1;
}

/* Variante verde do valor (lucros, estoque positivo) */
.card-indicador-valor.verde { color: var(--cor-verde); }

/* Variante dourada do valor (valor em estoque, total) */
.card-indicador-valor.dourado { color: var(--cor-dourado); }

/* Variante azul do valor (receita, vendas) */
.card-indicador-valor.azul { color: var(--cor-azul); }

/* Subtítulo descritivo abaixo do valor */
.card-indicador-subtitulo {
  font-size: 11px;
  color: var(--cor-texto-fraco);
  margin-top: 6px;
}


/* ================================================================
   7. TABELAS E BARRAS DE FERRAMENTAS
================================================================ */

/* Contêiner externo da tabela com borda e fundo */
.tabela-container {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  overflow: hidden; /* Garante que o border-radius seja respeitado */
}

/* Barra de ferramentas acima da tabela (busca + filtros + botões) */
.tabela-barra-ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
  flex-wrap: wrap; /* Quebra linha em telas pequenas */
}

/* Campo de busca com ícone de lupa */
.campo-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 7px 12px;
  flex: 1;            /* Ocupa o espaço disponível */
  min-width: 180px;
}

/* Input dentro do campo de busca */
.campo-busca input {
  background: none;
  border: none;
  outline: none;
  color: var(--cor-texto);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  width: 100%;
}

.campo-busca input::placeholder {
  color: var(--cor-texto-fraco);
}

/* Div com scroll horizontal para tabelas largas */
.tabela-scroll {
  overflow-x: auto;
}

/* Tabela HTML base */
table {
  width: 100%;
  border-collapse: collapse; /* Remove espaço entre células */
}

/* Células do cabeçalho da tabela */
thead th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  padding: 10px 16px;
  text-align: left;
  background: var(--cor-superficie-2);
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 400;
  cursor: pointer;   /* Indica que é clicável para ordenação */
  user-select: none; /* Impede seleção de texto ao clicar */
}

thead th:hover {
  color: var(--cor-dourado); /* Feedback visual ao passar o mouse */
}

/* Linhas do corpo da tabela */
tbody tr {
  border-bottom: 1px solid rgba(200, 169, 110, 0.06);
  transition: background 0.1s;
}

tbody tr:last-child {
  border-bottom: none; /* Remove borda da última linha */
}

tbody tr:hover {
  background: var(--cor-superficie-2); /* Destaque ao passar o mouse */
}

/* Célula padrão de dados */
td {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

/* Célula com nome do produto — texto mais destacado */
td.celula-nome-produto {
  color: var(--cor-texto);
  font-weight: 400;
  max-width: 220px;
}

/* Célula com valores monetários — fonte tabular para alinhamento */
td.celula-valor-monetario {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Célula com botões de ação (editar/excluir) */
td.celula-acoes {
  white-space: nowrap; /* Impede que os botões quebrem linha */
}

/* Estado vazio da tabela (quando não há resultados) */
.estado-vazio {
  text-align: center;
  padding: 40px;
  color: var(--cor-texto-fraco);
  font-size: 13px;
}

/* Cabeçalho de seção com título à esquerda e badge à direita */
.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Título de seção em fonte serifada */
.titulo-secao {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cor-texto);
  letter-spacing: 0.04em;
}


/* ================================================================
   8. BOTÕES
================================================================ */

/* Botão primário dourado — ação principal da seção */
.botao-primario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(200, 169, 110, 0.12);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 8px;
  color: var(--cor-dourado);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  white-space: nowrap;
}

.botao-primario:hover {
  background: rgba(200, 169, 110, 0.22);
  border-color: var(--cor-dourado);
}

/* Botão de filtro (Todos / Em estoque / Vendidos) */
.botao-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--cor-texto-suave);
  font-size: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}

.botao-filtro:hover {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
}

/* Estado ativo do botão de filtro */
.botao-filtro.ativo {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
  background: rgba(200, 169, 110, 0.08);
}

/* Botão de editar linha da tabela */
.botao-acao-editar {
  background: none;
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: 5px;
  color: var(--cor-dourado);
  cursor: pointer;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  padding: 4px 8px;
  transition: all 0.12s;
}

.botao-acao-editar:hover {
  background: rgba(200, 169, 110, 0.1);
}

/* Botão de excluir linha da tabela */
.botao-acao-excluir {
  background: none;
  border: 1px solid rgba(224, 92, 92, 0.2);
  border-radius: 5px;
  color: var(--cor-vermelho);
  cursor: pointer;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  padding: 4px 8px;
  margin-left: 4px;
  transition: all 0.12s;
}

.botao-acao-excluir:hover {
  background: rgba(224, 92, 92, 0.1);
}

/* Botão de confirmar no rodapé da gaveta */
.botao-confirmar-gaveta {
  flex: 1; /* Ocupa o espaço disponível ao lado do cancelar */
  padding: 10px;
  background: rgba(200, 169, 110, 0.14);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 8px;
  color: var(--cor-dourado);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.botao-confirmar-gaveta:hover {
  background: rgba(200, 169, 110, 0.24);
}

/* Botão de cancelar no rodapé da gaveta */
.botao-cancelar-gaveta {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  color: var(--cor-texto-suave);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

.botao-cancelar-gaveta:hover {
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}


/* ================================================================
   9. ETIQUETAS DE STATUS (pills / badges)
   Pequenas tags coloridas para exibir status, porcentagens e saldos
================================================================ */

/* Base de todas as etiquetas */
.etiqueta-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px; /* Formato pílula */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Etiqueta verde — em estoque, lucro positivo, margem boa */
.etiqueta-verde {
  background: rgba(76, 175, 130, 0.1);
  color: var(--cor-verde);
  border: 1px solid rgba(76, 175, 130, 0.2);
}

/* Etiqueta vermelha — sem estoque, perda */
.etiqueta-vermelha {
  background: rgba(224, 92, 92, 0.1);
  color: var(--cor-vermelho);
  border: 1px solid rgba(224, 92, 92, 0.2);
}

/* Etiqueta dourada — quantidade, margem de lucro */
.etiqueta-amarela {
  background: rgba(200, 169, 110, 0.1);
  color: var(--cor-dourado);
  border: 1px solid rgba(200, 169, 110, 0.25);
}

/* Etiqueta azul — datas, receita */
.etiqueta-azul {
  background: rgba(91, 155, 213, 0.1);
  color: var(--cor-azul);
  border: 1px solid rgba(91, 155, 213, 0.2);
}


/* ================================================================
   10. CARDS DE GRÁFICO E ELEMENTOS VISUAIS DO DASHBOARD
================================================================ */

/* Grade com dois cards de gráfico lado a lado */
.linha-graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

/* Card individual de gráfico */
.card-grafico {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 20px;
}

/* Título do card de gráfico */
.card-grafico-titulo {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 16px;
}

/* Linha de barra de progresso (nome + barra + valor) */
.linha-barra-progresso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Rótulo do produto à esquerda da barra */
.barra-progresso-rotulo {
  font-size: 11px;
  color: var(--cor-texto-suave);
  width: 140px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Trunca texto longo com "..." */
}

/* Trilho cinza da barra de progresso */
.barra-progresso-trilho {
  flex: 1;
  height: 4px;
  background: var(--cor-superficie-3);
  border-radius: 2px;
  overflow: hidden;
}

/* Preenchimento dourado da barra de progresso */
.barra-progresso-preenchimento {
  height: 100%;
  border-radius: 2px;
  background: var(--cor-dourado);
}

/* Valor monetário à direita da barra de progresso */
.barra-progresso-valor {
  font-size: 11px;
  color: var(--cor-texto-fraco);
  width: 64px;
  text-align: right;
  flex-shrink: 0;
}

/* Item da timeline (linha do tempo de vendas) */
.item-linha-tempo {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(200, 169, 110, 0.06);
}

.item-linha-tempo:last-child {
  border-bottom: none;
}

/* Ponto colorido da timeline */
.ponto-linha-tempo {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Área de texto da timeline */
.conteudo-linha-tempo {
  flex: 1;
}

/* Nome do produto na timeline */
.titulo-linha-tempo {
  font-size: 13px;
  color: var(--cor-texto);
}

/* Data e hora na timeline */
.meta-linha-tempo {
  font-size: 11px;
  color: var(--cor-texto-fraco);
  margin-top: 2px;
}

/* Valor monetário da venda na timeline */
.valor-linha-tempo {
  font-size: 13px;
  color: var(--cor-dourado);
  font-variant-numeric: tabular-nums;
}

/* Linha divisória horizontal entre seções da gaveta */
.divisor-formulario {
  height: 1px;
  background: var(--cor-borda);
  margin: 20px 0;
}


/* ================================================================
   11. GAVETA LATERAL (drawer)
   Painel deslizante que aparece pela direita para formulários
================================================================ */

/* Fundo semitransparente escuro atrás da gaveta */
.sobreposicao-gaveta {
  position: fixed;
  inset: 0; /* Ocupa toda a tela (top/right/bottom/left = 0) */
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  opacity: 0;               /* Invisível por padrão */
  pointer-events: none;     /* Não captura cliques quando invisível */
  transition: opacity 0.22s;
}

/* Estado aberto do fundo — fica visível e captura cliques */
.sobreposicao-gaveta.aberta {
  opacity: 1;
  pointer-events: all;
}

/* Painel da gaveta em si */
.painel-gaveta {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;          /* Largura da gaveta */
  max-width: 100vw;      /* Não ultrapassa a largura da tela */
  height: 100vh;
  background: var(--cor-superficie);
  border-left: 1px solid var(--cor-borda);
  z-index: 201;          /* Acima do fundo semitransparente */
  display: flex;
  flex-direction: column;
  transform: translateX(100%); /* Começa fora da tela (direita) */
  transition: transform 0.26s cubic-bezier(.4, 0, .2, 1); /* Animação de slide */
}

/* Estado aberto da gaveta — desliza para dentro */
.painel-gaveta.aberta {
  transform: translateX(0);
}

/* Cabeçalho da gaveta: título + botão fechar */
.gaveta-cabecalho {
  padding: 22px 24px;
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0; /* Não encolhe quando o corpo tem muito conteúdo */
}

/* Título da gaveta (ex: "Novo Produto", "Registrar Venda") */
.gaveta-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--cor-texto);
}

/* Botão "×" para fechar a gaveta */
.gaveta-botao-fechar {
  background: none;
  border: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  transition: color 0.12s;
}

.gaveta-botao-fechar:hover {
  color: var(--cor-texto);
}

/* Corpo da gaveta com scroll — contém o formulário */
.gaveta-corpo {
  flex: 1;
  overflow-y: auto; /* Permite rolar se o formulário for longo */
  padding: 24px;
}

/* Rodapé da gaveta com botões de ação */
.gaveta-rodape {
  padding: 18px 24px;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}


/* ================================================================
   12. FORMULÁRIOS DENTRO DA GAVETA
================================================================ */

/* Grupo de campo: rótulo + input (ou wrap de autocompletar) */
.grupo-campo-formulario {
  margin-bottom: 18px;
}

/* Rótulo acima do campo de formulário */
.rotulo-campo-formulario {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 7px;
}

/* Campo de input padrão dos formulários */
.campo-input-formulario {
  width: 100%;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--cor-texto);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

/* Input em foco recebe borda dourada */
.campo-input-formulario:focus {
  border-color: var(--cor-dourado);
}

.campo-input-formulario::placeholder {
  color: var(--cor-texto-fraco);
}

/* Input somente leitura — fundo mais escuro para indicar que não é editável */
.campo-input-formulario[readonly] {
  color: var(--cor-texto-suave);
  background: var(--cor-superficie-3);
  cursor: default;
}

/* Linha dupla de campos lado a lado */
.linha-dupla-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Caixa de confirmação de exclusão com estilo vermelho */
.caixa-confirmacao-exclusao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(224, 92, 92, 0.07);
  border: 1px solid rgba(224, 92, 92, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--cor-vermelho);
  margin-top: 4px;
}


/* ================================================================
   13. AUTOCOMPLETAR DE PRODUTOS
   Lista de sugestões que aparece ao digitar no campo de produto
================================================================ */

/* Contêiner relativo para posicionar a lista de sugestões */
.campo-autocompletar {
  position: relative;
}

/* Lista dropdown de sugestões */
.lista-autocompletar {
  position: absolute;
  top: 100%;      /* Logo abaixo do input */
  left: 0;
  right: 0;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 8px;
  z-index: 300;   /* Acima de tudo, incluindo a gaveta */
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  display: none;  /* Oculta por padrão */
}

/* Estado visível da lista de autocompletar */
.lista-autocompletar.visivel {
  display: block;
}

/* Item individual dentro da lista de autocompletar */
.item-autocompletar {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  transition: background 0.1s;
}

.item-autocompletar:hover,
.item-autocompletar.destacado {
  background: var(--cor-superficie-3);
  color: var(--cor-texto);
}


/* ================================================================
   14. CAIXA DE INFORMAÇÃO AUTOMÁTICA
   Aparece abaixo do campo de produto com dados puxados do catálogo
================================================================ */

/* Caixa informativa dourada discreta */
.caixa-info-produto {
  background: rgba(200, 169, 110, 0.06);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: none; /* Fica oculta até um produto ser selecionado */
}

/* Estado visível após seleção de produto */
.caixa-info-produto.visivel {
  display: block;
}

/* Linha dentro da caixa de info: chave à esq. + valor à dir. */
.linha-info-produto {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.linha-info-produto:last-child {
  margin-bottom: 0;
}

/* Texto da chave (rótulo) */
.chave-info-produto {
  color: var(--cor-texto-fraco);
}

/* Valor correspondente em dourado */
.valor-info-produto {
  color: var(--cor-dourado);
  font-variant-numeric: tabular-nums;
}

/* Caixa de preview de lucro no formulário de produto */
.caixa-preview-lucro {
  background: rgba(200, 169, 110, 0.06);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

/* Linha dentro do preview de lucro */
.linha-preview-lucro {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.linha-preview-lucro:last-child {
  margin-bottom: 0;
}

/* Rótulo do preview */
.rotulo-preview-lucro {
  color: var(--cor-texto-fraco);
}

/* Valor calculado do preview */
.valor-preview-lucro {
  color: var(--cor-dourado);
  font-variant-numeric: tabular-nums;
}


/* ================================================================
   15. NOTIFICAÇÃO TOAST
   Mensagem temporária no canto inferior direito da tela
================================================================ */

/* Estilo base do toast — posicionado fixo no canto */
.notificacao-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--cor-texto);
  z-index: 500;           /* Acima de tudo */
  transform: translateY(20px); /* Começa levemente abaixo */
  opacity: 0;             /* Invisível por padrão */
  transition: all 0.22s;
  pointer-events: none;   /* Não bloqueia cliques na tela */
}

/* Estado visível do toast */
.notificacao-toast.visivel {
  transform: translateY(0);
  opacity: 1;
}

/* Variante de sucesso (verde) */
.notificacao-toast.sucesso {
  border-color: rgba(76, 175, 130, 0.4);
  color: var(--cor-verde);
}

/* Variante de erro (vermelho) */
.notificacao-toast.erro {
  border-color: rgba(224, 92, 92, 0.4);
  color: var(--cor-vermelho);
}


/* ================================================================
   16. RESPONSIVIDADE MOBILE
   Ajustes para telas com largura inferior a 900px
================================================================ */
@media (max-width: 900px) {

  /* Barra lateral colapsa para 60px mostrando só ícones */
  .barra-lateral {
    width: 60px;
  }

  /* Oculta textos e rótulos da barra lateral colapsada */
  .logo-nome,
  .logo-subtitulo,
  .menu-item span,
  .menu-rotulo {
    display: none;
  }

  /* Conteúdo principal acompanha a barra lateral colapsada */
  .area-principal {
    margin-left: 60px;
  }

  /* Gráficos empilham verticalmente em telas pequenas */
  .linha-graficos {
    grid-template-columns: 1fr;
  }

  /* Grade de indicadores vai para 2 colunas */
  .grade-indicadores {
    grid-template-columns: 1fr 1fr;
  }

  /* Gaveta ocupa toda a largura da tela em mobile */
  .painel-gaveta {
    width: 100vw;
  }
}