/* ── RADAR RIO — CSS COMPARTILHADO ── */

@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

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

:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1e1e1e;
  --border: rgba(255,255,255,0.08);
  --accent: #FF6200;
  --accent-dim: rgba(255,98,0,0.12);
  --accent-border: rgba(255,98,0,0.3);
  --text: #f0ede6;
  --text-muted: #7a7870;
  --text-mid: #b0ada6;
  --radius: 16px;
  --radius-sm: 10px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rethink Sans', sans-serif;
  min-height: 100vh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV BOTTOM (compartilhado) ── */
nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  z-index: 100;
}

.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: color 0.15s;
  letter-spacing: 0.3px; text-transform: uppercase;
  background: none; border: none;
}
.nav-item.active { color: var(--accent); }
.nav-item svg { width: 22px; height: 22px; }

/* ── LOGO SVG ── */
.logo { display: flex; align-items: center; }

/* ── SPINNER ── */
.spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 60px auto; display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ESTADO VAZIO ── */
.state {
  padding: 56px 20px; text-align: center; color: var(--text-muted);
}
.state svg { width: 44px; height: 44px; margin: 0 auto 14px; display: block; opacity: 0.3; }
.state p { font-size: 14px; margin-top: 6px; }

/* ── GEO BTN ── */
.geo-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: 'Rethink Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 100px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.geo-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.geo-btn:hover { background: rgba(255,98,0,0.2); }
.geo-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── SEARCH ── */
.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted);
  pointer-events: none;
}
.search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Rethink Sans', sans-serif;
  font-size: 15px; padding: 11px 14px 11px 40px;
  outline: none; transition: border-color 0.2s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent-border); }

/* ── ANIMAÇÃO ENTRADA ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}