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

/* =====================================================
   PALETA / VARIÁVEIS DE TEMA
   ===================================================== */
:root {
  --c-primary:   #0684af;
  --c-01:#0481ae; --c-02:#c6e4ed; --c-03:#33a4bc; --c-04:#57afca;
  --c-05:#0a96b6; --c-06:#2c9bbb; --c-07:#74c6d8; --c-08:#84bcd4;
  --c-09:#30aecc; --c-10:#0e8cbc;

  --radius:  16px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.18);
  --shadow-glow: 0 0 24px rgba(6,132,175,.25);
  --transition: .25s ease;
}

/* DARK (padrão) */
html[data-theme="dark"] {
  --bg-1: #061826;
  --bg-2: #082338;
  --bg-3: #0a2e4a;
  --txt:        #e8f3fa;
  --txt-soft:   #a9c5d6;
  --txt-muted:  #6f8aa0;

  --glass-bg:     rgba(8, 35, 56, 0.45);
  --glass-bg-2:   rgba(255,255,255,0.05);
  --glass-border: rgba(116, 198, 216, 0.18);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.35);

  --accent:      var(--c-primary);
  --accent-soft: rgba(6,132,175,.20);
  --map-color:   rgba(116, 198, 216, 0.13);
  --map-glow:    rgba(48, 174, 204, 0.35);
}

/* LIGHT */
html[data-theme="light"] {
  --bg-1: #eaf5fb;
  --bg-2: #d9ecf5;
  --bg-3: #c6e4ed;
  --txt:        #07334a;
  --txt-soft:   #2b5d76;
  --txt-muted:  #6b8a9c;

  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-bg-2:   rgba(255,255,255,0.35);
  --glass-border: rgba(6, 132, 175, 0.22);
  --glass-shadow: 0 8px 32px rgba(6,132,175,.18);

  --accent:      var(--c-primary);
  --accent-soft: rgba(6,132,175,.15);
  --map-color:   rgba(6, 132, 175, 0.18);
  --map-glow:    rgba(6, 132, 175, 0.35);
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--txt);
  background: radial-gradient(1200px 800px at 10% -10%, var(--c-05) 0%, transparent 55%),
              radial-gradient(900px 700px  at 110% 10%, var(--c-10) 0%, transparent 55%),
              linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }

/* =====================================================
   MAPA-MÚNDI (background animado, SVG via mask)
   ===================================================== */
.world-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
}
.world-bg::before,
.world-bg::after {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background: var(--map-color);
  -webkit-mask: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') center / contain no-repeat;
          mask: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') center / contain no-repeat;
  opacity: .55;
  filter: blur(.4px);
}
.world-bg::after {
  background: var(--map-glow);
  filter: blur(20px);
  opacity: .35;
  animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.02); }
}

.world-dots { position: absolute; inset: 0; }
.world-dots span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 12px var(--c-primary), 0 0 30px var(--c-09);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.world-dots span:nth-child(1){ top:38%; left:30%; animation-delay:.0s; }
.world-dots span:nth-child(2){ top:55%; left:33%; animation-delay:.6s; }
.world-dots span:nth-child(3){ top:42%; left:78%; animation-delay:1.2s; }
.world-dots span:nth-child(4){ top:30%; left:55%; animation-delay:1.8s; }
.world-dots span:nth-child(5){ top:65%; left:50%; animation-delay:.3s; }
@keyframes dotPulse {
  0%   { transform: scale(.6); opacity: .4; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(.6); opacity: .4; }
}

/* Variante sutil — usar em telas internas (painel) onde o mapa não deve competir com o conteúdo */
.world-bg.subtle::before { opacity: .18; }
.world-bg.subtle::after  { opacity: .12; filter: blur(28px); animation-duration: 14s; }
.world-bg.subtle .world-dots span {
  width: 6px; height: 6px;
  opacity: .55;
  box-shadow: 0 0 8px var(--c-primary), 0 0 18px var(--c-09);
}

/* =====================================================
   LOGO — swap automático por tema
     .theme-dark  → visível só com data-theme="dark"  (logo branca)
     .theme-light → visível só com data-theme="light" (logo escura)
   ===================================================== */
html[data-theme="dark"]  .theme-light { display: none !important; }
html[data-theme="light"] .theme-dark  { display: none !important; }

/* =====================================================
   SCROLLBAR — sutil, na paleta do projeto
   ===================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 132, 175, .45) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(6,132,175,.45), rgba(48,174,204,.45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(6,132,175,.85), rgba(48,174,204,.85));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Em fundos claros, levemente mais escuro pra contrastar */
html[data-theme="light"] * { scrollbar-color: rgba(6, 132, 175, .55) transparent; }

/* =====================================================
   GLASS BASE
   ===================================================== */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  background: linear-gradient(135deg, var(--c-primary), var(--c-10));
  color: #fff;
  box-shadow: 0 8px 24px rgba(6,132,175,.35);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6,132,175,.5); }
.btn:active { transform: translateY(0); }

.btn.ghost {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  color: var(--txt);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--accent-soft); }