@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Base & Variáveis */
:root {
  /* Cores de fundo */
  --laranja-100: #ffedd5;
  --orange-50: #fff7ed;
  --dark-900: #111827;
  --dark-950: #030712;
  --black: #000;
  --yellow-500: #eab308;

  /* Glassmorphism */
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.dark {
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(17, 24, 39, 0.8);
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Fundo Animado "Povoado" e Mais Visível --- */
.body-background-animado {
    background: linear-gradient(to bottom right, var(--laranja-100), var(--orange-50), white);
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    overflow-x: hidden; /* Garante que os emojis fora da tela não causem scroll horizontal */
    z-index: 1; /* Garante que o conteúdo esteja acima dos emojis de fundo */
}

.dark .body-background-animado {
    background: linear-gradient(to bottom right, var(--dark-900), var(--dark-950), var(--black));
}

/* Container para os emojis de fundo */
.bg-decorations {
    position: fixed; /* Fixa os emojis no viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Não interfere com cliques do usuário */
    z-index: 0; /* Garante que fiquem no fundo */
    overflow: hidden;
}

.bg-emoji {
    position: absolute;
    opacity: 0.15; /* Aumentado para 15% - mais visível que 6% */
    user-select: none;
    /* Removido filter: grayscale(20%); para cores mais vibrantes */
}

/* Variações de Posição, Tamanho e Rotação para maior preenchimento e profundidade */
.emoji-1 { top: 5%; left: 8%; font-size: 10rem; transform: rotate(15deg); opacity: 0.12; } /* Cacto Grande */
.emoji-2 { top: 20%; right: 1%; font-size: 7rem; transform: rotate(-25deg); } /* Milho */
.emoji-3 { bottom: 10%; left: 5%; font-size: 5rem; transform: rotate(40deg); opacity: 0.18; } /* Pimenta Grande */
.emoji-4 { top: 60%; left: -3%; font-size: 8rem; transform: rotate(-10deg); opacity: 0.1; } /* Caranguejo */
.emoji-5 { top: 35%; left: 30%; font-size: 6rem; transform: rotate(5deg); opacity: 0.15; } /* Chapéu de Couro */
.emoji-6 { bottom: 25%; right: 10%; font-size: 4rem; transform: rotate(0deg); opacity: 0.2; } /* Sol Pequeno e Quente */
.emoji-7 { top: 0%; left: 50%; font-size: 18rem; transform: translateX(-50%); color: var(--yellow-500); opacity: 0.08; z-index: -1;} /* Solzão no Topo */
.emoji-8 { bottom: 2%; right: 20%; font-size: 9rem; transform: rotate(-30deg); opacity: 0.1; } /* Coco / Coquinho */
.emoji-9 { top: 55%; right: 25%; font-size: 5rem; transform: rotate(10deg); opacity: 0.18; } /* Peixe */
.emoji-10 { top: 10%; right: 40%; font-size: 6rem; transform: rotate(20deg); opacity: 0.12; } /* Pamonha / Comida Típica */
.emoji-11 { bottom: 40%; left: 15%; font-size: 4rem; transform: rotate(-5deg); opacity: 0.22; } /* Pimenta Menor */
.emoji-12 { top: 70%; left: 45%; font-size: 7rem; transform: rotate(35deg); opacity: 0.1; } /* Cacto Menor */


/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* Utilitários Glassmorphism */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}

.glass-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.dark .glass-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Leaflet */
.leaflet-container { font-family: 'Inter', sans-serif; background: #e5e7eb; }
.dark .leaflet-container { background: #111827; }
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
  padding: 0;
  border: 1px solid rgba(0,0,0,0.05);
}
.dark .leaflet-popup-content-wrapper {
  background: rgba(30, 41, 59, 0.95);
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
}
.leaflet-popup-content { margin: 0 !important; width: 200px !important; }
.leaflet-popup-tip { background: rgba(255, 255, 255, 0.95); }
.dark .leaflet-popup-tip { background: rgba(30, 41, 59, 0.95); }

/* Animações */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.mask-fade-right {
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}