/* ==========================================================================
   Estilos Globais e Variáveis do Design System
   ========================================================================== */

:root {
  /* Paleta de Cores */
  --cor-primaria: #fbb900;       /* Amarelo Delupo */
  --cor-primaria-hover: #e6a800;
  --cor-secundaria: #3f3f40;      /* Cinza Sidebar */
  --cor-texto: #333;
  --cor-texto-claro: #ffffff;
  --cor-fundo: #f0f2f5;
  --cor-fundo-card: #ffffff;
  --cor-borda: #ddd;

  /* Cores de Ação e Feedback */
  --cor-sucesso: #28a745;
  --cor-erro: #dc3545;
  --cor-info: #007bff;
  --cor-aviso-fundo-sucesso: #d4edda;
  --cor-aviso-texto-sucesso: #155724;
  --cor-aviso-fundo-erro: #f8d7da;
  --cor-aviso-texto-erro: #721c24;

  /* Tipografia */
  --fonte-principal: Arial, Helvetica, sans-serif;

  /* Outras variáveis */
  --raio-borda: 4px;
  --sombra-card: 0 4px 8px rgba(0, 0, 0, 0.1);
  --transicao-padrao: all 0.2s ease-in-out;
}

/* ==========================================================================
   Reset e Estilos Base
   ========================================================================== */
body {
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  margin: 0;
  display: flex;
  min-height: 100vh;
}

h1, h2, h3 {
  color: var(--cor-secundaria);
}

a {
  color: var(--cor-info);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

* {
  box-sizing: border-box;
}

/* ==========================================================================
   Componentes Padronizados
   ========================================================================== */

/* --- Botões --- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: var(--raio-borda);
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: var(--transicao-padrao);
}

.btn:disabled {
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

.btn-primario {
  background-color: var(--cor-primaria);
  color: var(--cor-texto);
}
.btn-primario:hover:not(:disabled) {
  background-color: var(--cor-primaria-hover);
}

.btn-sucesso {
  background-color: var(--cor-sucesso);
  color: var(--cor-texto-claro);
}

.btn-erro {
  background-color: var(--cor-erro);
  color: var(--cor-texto-claro);
}

.btn-info {
  background-color: var(--cor-info);
  color: var(--cor-texto-claro);
}

/* --- Tabelas --- */
.tabela-padrao {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  background-color: var(--cor-fundo-card);
  border-radius: var(--raio-borda);
  overflow: hidden; /* Garante que o raio da borda seja aplicado */
  box-shadow: var(--sombra-card);
}

.tabela-padrao th,
.tabela-padrao td {
  padding: 12px 15px;
  border: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: middle;
}

.tabela-padrao thead tr {
  background-color: #f2f2f2;
}

.tabela-padrao tbody tr:nth-of-type(even) {
  background-color: #f9f9f9;
}

.tabela-padrao .acoes {
  text-align: center;
  white-space: nowrap;
}

.tabela-padrao .acoes .btn {
  padding: 5px 10px;
  font-size: 0.9rem;
  margin: 0 2px;
}

/* --- Formulários e Cards --- */
.card {
  background-color: var(--cor-fundo-card);
  padding: 1.5rem;
  border-radius: var(--raio-borda);
  margin-top: 1rem;
  border: 1px solid var(--cor-borda);
  max-width: 500px;
}

.card form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.card input,
.card select {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: var(--raio-borda);
  font-size: 1rem;
}

/* --- Mensagens de Feedback --- */
.mensagem {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--raio-borda);
  text-align: center;
  font-weight: bold;
}

.mensagem.sucesso {
  background-color: var(--cor-aviso-fundo-sucesso);
  color: var(--cor-aviso-texto-sucesso);
}

.mensagem.erro {
  background-color: var(--cor-aviso-fundo-erro);
  color: var(--cor-aviso-texto-erro);
}

/* --- Utilitários --- */
.d-flex { display: flex; }
.gap-1 { gap: 1rem; }
.align-items-center { align-items: center; }
.mb-1 { margin-bottom: 1rem; }
.ml-auto { margin-left: auto; }