/* =================================== */
/* Definição de Variáveis de Cores */
/* =================================== */
:root {
  /* Cores Principais do Tema */
  --cor-primaria: #6a0dad; /* Roxo principal, para botões e títulos */
  --cor-secundaria: #9b59b6; /* Roxo para o gradiente de fundo */
  --cor-primaria-escura: #4b0082; /* Roxo mais escuro para o hover */
  --cor-terciaria: #8821b7; /* Tom de roxo mais claro para o título principal */
  
  /* Cores de Fundo e Elementos de UI */
  --cor-fundo: #f4f0fa; /* Fundo principal da página */
  --cor-fundo-card: #fff; /* Fundo de cartões e seções */
  --cor-fundo-claro: #f0e6fa; /* Fundo de cabeçalhos de tabela e rodapé */
  --cor-borda: #ccc; /* Borda de inputs */
  --cor-borda-clara: #eee; /* Borda clara para tabelas e cartões */
  --cor-borda-escura: #ddd; /* Borda um pouco mais escura */
  
  /* Cores de Texto */
  --cor-texto-principal: #333; /* Texto padrão */
  --cor-texto-claro: #fff; /* Texto em fundos escuros */
  --cor-texto-secundario: #6a0dad; /* Texto em botões e rodapé */
  
  /* Cores de Status */
  --cor-entrada: #1e8e3e; /* Verde para 'Entradas' */
  --cor-saida: #d93025; /* Vermelho para 'Saídas' */
  --cor-saida-hover: #c0392b; /* Vermelho escuro para o hover de 'saída' */
  --cor-excluir: #e74c3c; /* Vermelho para o botão de excluir */
}

/* =================================== */
/* Estilos Gerais e Layout da Página */
/* =================================== */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; 
} 

body { 
  background: var(--cor-fundo); 
  color: var(--cor-texto-principal); 
  line-height: 1.6; 
} 

header { 
  background: linear-gradient(135deg, var(--cor-fundo-claro), var(--cor-secundaria)); 
  color: var(--cor-texto-claro); 
  padding: 24px; 
  text-align: center; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
} 

.container-logo-secao { 
  height: 50px; 
  width: auto; 
  margin: auto 0; 
  display: inline; 
} 

a, 
.btn { 
  transition: all 300ms ease; 
} 

.logo-emei { 
  height: 70px; 
  vertical-align: middle; 
  margin-right: 15px; 
} 

/* =================================== */
/* Estilos de Navegação */
/* =================================== */
nav, 
.links-navegacao { 
  display: flex; 
} 

nav { 
  justify-content: space-evenly; 
  align-items: center; 
  height: 17vh; 
} 

.links-navegacao, .links-navegacao-sobre { 
  gap: 2rem; 
  list-style: none; 
  font-size: 2rem; 
  padding: 10px; 
} 

a { 
  text-decoration: none; 
  text-decoration-color: var(--cor-texto-claro); 
  color: var(--cor-secundaria); 
} 

a:hover { 
  color: var(--cor-primaria); 
  text-decoration: underline; 
  text-underline-offset: 1rem; 
  text-decoration-color: var(--cor-borda-clara); 
} 

.links-navegacao-sobre:hover { 
  color: var(--cor-texto-claro); 
  text-decoration: underline; 
  text-underline-offset: 1rem; 
  text-decoration-color: var(--cor-borda-clara); 
} 

/* =================================== */
/* Estilos para o Conteúdo Principal */
/* =================================== */
main { 
  max-width: 1100px; 
  margin: 20px auto; 
  padding: 20px; 
  background: var(--cor-fundo-card); 
  border-radius: 14px; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); 
} 

.titulo-principal { 
  color: var(--cor-terciaria); 
} 

h1, h2 { 
  color: var(--cor-primaria); 
  text-align: center; 
} 

p { 
  text-align: center; 
  margin: 10px; 
} 

ul, li { 
  text-align: center; 
  list-style: disc; 
  list-style-position: inside; 
  padding: 5px; 
} 

/* =================================== */
/* Formulários e Inputs */
/* =================================== */
#secao-transacao form { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 12px; 
  margin-bottom: 20px; 
  align-items: end; 
} 

#secao-transacao .grupo-formulario { 
  display: flex; 
  flex-direction: column; 
} 

#secao-transacao label { 
  font-size: 0.9rem; 
  font-weight: 600; 
  color: var(--cor-primaria); 
  margin-bottom: 6px; 
} 

#secao-transacao input, 
#secao-transacao select { 
  padding: 10px; 
  border: 1px solid var(--cor-borda); 
  border-radius: 8px; 
  width: 100%; 
} 

#secao-transacao button { 
  grid-column: 1 / -1; 
  padding: 12px 16px; 
  background: var(--cor-primaria); 
  color: var(--cor-texto-claro); 
  border: none; 
  border-radius: 10px; 
  cursor: pointer; 
  transition: 0.3s; 
} 

#secao-transacao button:hover { 
  background: var(--cor-primaria-escura); 
} 

.formulario-fornecedor { 
  display: flex; 
  gap: 10px; 
  margin-bottom: 12px; 
} 

.formulario-fornecedor input { 
  flex: 1; 
  padding: 10px; 
  border: 1px solid var(--cor-borda); 
  border-radius: 8px; 
} 

.formulario-fornecedor button { 
  padding: 10px 16px; 
  background: var(--cor-primaria); 
  color: var(--cor-texto-claro); 
  border: none; 
  border-radius: 10px; 
  cursor: pointer; 
} 

/* =================================== */
/* Tabelas */
/* =================================== */
/* Contêiner de rolagem para tabelas em telas pequenas */
.container-tabela {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#tabela-transacoes { 
  width: 100%; 
  border-collapse: collapse; 
  margin-top: 10px; 
} 

#tabela-transacoes th, #tabela-transacoes td { 
  padding: 12px; 
  text-align: center; 
  border-bottom: 1px solid var(--cor-borda-clara); 
} 

#tabela-transacoes th { 
  background: var(--cor-fundo-claro); 
} 

#tabela-anual { 
  width: 100%; 
  border-collapse: collapse; 
  margin-bottom: 20px; 
} 

#tabela-anual th, #tabela-anual td { 
  padding: 10px; 
  border: 1px solid var(--cor-borda-escura); 
  text-align: center; 
} 

#tabela-anual th { 
  background: var(--cor-fundo-claro); 
} 

/* Estilos de status */
.entrada { 
  color: var(--cor-entrada); 
  font-weight: 600; 
} 

.saida { 
  color: var(--cor-saida); 
  font-weight: 600; 
} 

/* =================================== */
/* Gráficos e Indicadores (KPIs) */
/* =================================== */
.container-indicadores { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 14px; 
} 

.cartao.indicador { 
  background: var(--cor-fundo-card); 
  border: 1px solid var(--cor-borda-clara); 
  border-radius: 12px; 
  padding: 18px; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.04); 
} 

.cartao.indicador h3 { 
  color: var(--cor-primaria); 
  font-size: 1rem; 
  margin-bottom: 8px; 
} 

.cartao.indicador p { 
  font-size: 1.3rem; 
  font-weight: 700; 
} 

#grafico-financeiro { 
  max-width: auto; 
  width: 100%; 
  height: auto; 
} 

#grafico-anual { 
  max-width: 100%; 
  height: 340px; 
  margin-top: 20px; 
} 

/* =================================== */
/* Botões e Outros Componentes */
/* =================================== */
.container-botoes-imprimir button, 
.btn { 
  padding: 10px 16px; 
  background: var(--cor-primaria); 
  color: var(--cor-texto-claro); 
  border: none; 
  border-radius: 10px; 
  cursor: pointer; 
} 

.container-botoes-imprimir button:hover, 
.btn:hover { 
  background: var(--cor-primaria-escura); 
} 

button.excluir, .remover { 
  background: var(--cor-excluir); 
  color: var(--cor-texto-claro); 
  border: none; 
  padding: 6px 10px; 
  border-radius: 8px; 
  cursor: pointer; 
} 

button.excluir:hover, .remover:hover { 
  background: var(--cor-saida-hover); 
} 

/* =================================== */
/* Rodapé */
/* =================================== */
footer {
  text-align: center;
  padding: 24px;
  background-color: var(--cor-fundo-claro);
  border-top: 1px solid var(--cor-borda-escura);
  margin-top: 40px;
  color: var(--cor-texto-secundario);
  font-size: 0.9rem;
}

footer p {
  margin: 0;
  padding: 4px 0;
}

/* =================================== */
/* Responsividade */
/* =================================== */
@media (max-width: 900px) { 
  .container-indicadores { 
    grid-template-columns: 1fr; 
  } 

  #secao-transacao form { 
    grid-template-columns: 1fr; 
  } 

  #secao-transacao button { 
    grid-column: auto; 
  } 
}

@media (max-width: 500px) {
  #secao-transacao form {
    grid-template-columns: 1fr;
  }

  #secao-transacao input,
  #secao-transacao select,
  #secao-transacao .grupo-formulario {
    width: 100%;
  }
}