:root {
  /* Cores Primárias e de Apoio */
  --primary-red: #b6231f;
  --primary-red-hover: #981b18;
  --secondary-cream: #f7f3e9;
  --accent-blue: #42557a; /* Tom do bloco azul da imagem */
  
  /* Cores Neutras */
  --bg-main: #fbfcfb;
  --text-dark: #121212;
  --text-muted: #555555;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;

  /* Status */
  --status-ativa: #16a34a;
  --status-encerrada: #b6231f;
}

/* ============================================================
   RESPONSIVIDADE GLOBAL (MOBILE & TABLET)
   ============================================================ */
@media (max-width: 768px) {
  /* Layout passa de lado a lado para coluna (topo -> conteúdo) */
  body {
    flex-direction: column !important;
  }

  /* SIDEBAR: Vira um cabeçalho fixo no topo no celular */
  .sidebar {
    width: 100% !important;
    min-width: 100% !important;
    padding: 1rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .sidebar h2 {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    text-align: center;
  }

  /* Links do menu em linha horizontal rolável ou distribuídos */
  .sidebar nav {
    flex-direction: row !important;
    justify-content: center;
    gap: 0.5rem !important;
  }

  .sidebar nav a {
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
    text-align: center;
    flex: 1;
  }

  /* ÁREA PRINCIPAL: Aproveita toda a tela */
  .main-content {
    padding: 1.25rem 1rem !important;
    min-height: calc(100vh - 120px) !important;
  }

  /* Títulos e textos maiores para fácil leitura */
  .main-content h2 {
    font-size: 1.5rem !important;
  }

  /* CARDS E GRIDS: 1 por linha no celular */
  .rifas-grid,
  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* FORMULÁRIOS E BUSCAS: Botões empilhados se a tela for muito estreita */
  .search-box {
    flex-direction: column !important;
    max-width: 100% !important;
  }

  .search-box button {
    width: 100% !important;
    padding: 0.85rem !important;
    font-size: 1rem !important;
  }

  /* BOTÕES TOUCH-FRIENDLY (Maiores para o polegar) */
  button, .btn, .btn-comprar {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}