/* Casa Barca CRM — paleta vinho/dourado */
:root {
  --vinho: #6b1d2c;
  --vinho-claro: #8b2a3d;
  --dourado: #c9a44c;
  --dourado-claro: #e8d9a0;
  --bg: #faf8f3;
  --card: #ffffff;
  --texto: #1a1a1a;
  --texto-suave: #666;
  --borda: #e0ddd5;
  --verde: #2e7d32;
  --vermelho: #c62828;
  --laranja: #ef6c00;
  --azul: #1565c0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.6;
}

/* ---------- Header ---------- */
.header {
  background: var(--vinho);
  color: white;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.header h1 span { color: var(--dourado); }
.header .user-info {
  font-size: 13px;
  opacity: 0.85;
}

/* ---------- Landing ---------- */
.landing {
  max-width: 640px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}
.landing h1 {
  color: var(--vinho);
  font-size: 32px;
  margin-bottom: 12px;
}
.landing .subtitle {
  color: var(--texto-suave);
  font-size: 16px;
  margin-bottom: 40px;
}
.btn-cta {
  display: inline-block;
  background: var(--vinho);
  color: white;
  padding: 14px 40px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-cta:hover { background: var(--vinho-claro); }

/* ---------- Dashboard ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* Filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  background: var(--card);
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--borda);
}
.filters label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filters select, .filters input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 14px;
  background: white;
}
.filters select { min-width: 180px; }

/* Cards de resumo */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px 20px;
  border-left: 4px solid var(--dourado);
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--vinho);
}
.stat-card.vip { border-left-color: var(--dourado); }
.stat-card.frequente { border-left-color: var(--azul); }
.stat-card.dorminte { border-left-color: var(--laranja); }
.stat-card.esporadico { border-left-color: var(--texto-suave); }

/* Tabela */
.table-wrap {
  background: var(--card);
  border-radius: 10px;
  border: 1px solid var(--borda);
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: #f5f2ec;
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borda);
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  font-size: 14px;
}
tr:last-child td { border-bottom: none; }
tr:hover { background: #faf8f3; }

/* Badges de cluster */
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.vip { background: var(--dourado-claro); color: #6b4a00; }
.badge.frequente { background: #e3f2fd; color: var(--azul); }
.badge.dorminte { background: #fff3e0; color: var(--laranja); }
.badge.esporadico { background: #f0f0f0; color: var(--texto-suave); }
.badge.regular { background: #f5f5f5; color: var(--texto-suave); }
.badge.categoria { background: #e8f5e9; color: var(--verde); }
.badge.aniversario { background: #fce4ec; color: #ad1457; }
.badge.cupom { background: #ede7f6; color: #4527a0; }

/* Loading / erro / vazio */
.loading, .error, .empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-suave);
}
.error { color: var(--vermelho); }
.spinner {
  border: 3px solid var(--borda);
  border-top: 3px solid var(--vinho);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }