/* ============================================================
   Sportflyx — Theme global (SaaS profissional, anti-IA)
   -------------------------------------------------------------
   Contém:
     • Tokens (cores, raios, espaçamento, sombras)
     • Redefinição das classes legadas (glass-card, mesh-bg,
       glow-green*, hero-gradient, pulse-dot) para versões
       sóbrias sem neon/glow/gradiente/glassmorphism.
   Importe este arquivo ANTES de qualquer CSS específico da tela.
   ============================================================ */

:root {
  /* --- Paleta base neutra --- */
  --bg-app:           #0b0d0e;   /* fundo do app (dark neutro, sem tom esverdeado) */
  --bg-surface:       #131518;   /* superfície principal (cards, painéis) */
  --bg-surface-2:     #181b1f;   /* superfície elevada (dropdowns, popovers) */
  --bg-input:         #17191c;   /* fundo de inputs */
  --bg-hover:         rgba(255,255,255,0.04);

  --border-subtle:    #22252a;   /* borda padrão */
  --border-strong:    #2b2f35;   /* borda de destaque */
  --divider:          #1c1f23;

  /* Texto (segue hierarquia clara) */
  --text-primary:     #e7e9ec;
  --text-secondary:   #a8adb4;
  --text-muted:       #6c7278;
  --text-disabled:    #4a4f55;
  --text-inverse:     #0b0d0e;

  /* --- Cor de destaque (verde sóbrio Sportflyx, NÃO neon) --- */
  --brand:            #15803d;   /* green-700 — para ação primária: botões, borda ativa */
  --brand-hover:      #166534;   /* green-800 */
  --brand-active:     #14532d;   /* green-900 */
  --brand-soft-bg:    rgba(21,128,61,0.14);
  --brand-soft-fg:    #7ab48f;   /* verde-cinza sóbrio para texto sobre bg soft (não é o green-300 clarão) */

  /* --- Cores semânticas ---
     `soft-fg` NUNCA é o "300" da paleta Tailwind — em dark mode isso vira "neon".
     Uso tons médios dessaturados, no estilo Linear/GitHub Primer dark. */
  --success:          #15803d;
  --success-soft-bg:  rgba(21,128,61,0.14);
  --success-soft-fg:  #7ab48f;   /* verde-cinza sóbrio */
  --warning:          #b45309;   /* amber-700 */
  --warning-soft-bg:  rgba(180,83,9,0.15);
  --warning-soft-fg:  #d1a05a;   /* amber dessaturado */
  --danger:           #b91c1c;   /* red-700 */
  --danger-soft-bg:   rgba(185,28,28,0.14);
  --danger-soft-fg:   #d97a7a;   /* vermelho terroso (não pastel salmão) */
  --info:             #1d4ed8;   /* blue-700 */
  --info-soft-bg:     rgba(29,78,216,0.14);
  --info-soft-fg:     #7fa1d4;   /* azul dessaturado */

  /* --- Raios (escala curta e consistente) --- */
  --radius-sm:        4px;
  --radius:           6px;
  --radius-md:        8px;
  --radius-lg:        10px;

  /* --- Sombras discretas (apenas para elementos elevados reais) --- */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.40);

  /* --- Foco (outline sólido, sem glow) --- */
  --ring:             #15803d;
}

* { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
body { background: var(--bg-app); color: var(--text-primary); }
body { overflow-x: hidden; }

/* ============================================================
   Superfícies (substituem glass-card / glass-card-light)
   ------------------------------------------------------------
   Sem transparência, sem backdrop-blur, sem borda branca
   semitransparente. Diferenciação por cor sólida + borda fina.
   ============================================================ */

.glass-card,
.glass-card-light {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-card-light { background: var(--bg-surface-2); }

/* ============================================================
   Fundos decorativos → neutralizados
   ============================================================ */

.mesh-bg,
.hero-gradient,
.victory-bg,
.side-gradient {
  background: var(--bg-app);
}

/* ============================================================
   Glow → removido (proibido pela skill)
   ============================================================ */

.glow-green,
.glow-green-soft {
  box-shadow: none;
}

/* ============================================================
   Pulse-dot → mantém pulso discreto (só opacidade, sem scale)
   Usado para indicar "ao vivo" / "não lido". Marcador funcional,
   não decorativo.
   ============================================================ */

.pulse-dot {
  animation: sfxPulseDot 2s ease-in-out infinite;
}
@keyframes sfxPulseDot {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.45; }
}

/* ============================================================
   Input padrão
   Foco: ring sólido, sem glow verde exagerado.
   ============================================================ */

.input-field {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-field:hover  { border-color: var(--border-strong); }
.input-field:focus,
.input-field:focus-visible {
  background: var(--bg-input);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(21,128,61,0.20);
  outline: none;
}
.input-field::placeholder { color: var(--text-muted); }

/* ============================================================
   Scrollbar (sutil, não escondida)
   ============================================================ */

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #2a2d31; border-radius: 6px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: #3a3e43; }

/* ============================================================
   Animações mínimas — sem levitação/tilt/bounce decorativos.
   ============================================================ */

@keyframes sfxFadeIn   { from { opacity: 0; }               to { opacity: 1; } }
@keyframes sfxSlideUp  { from { opacity: 0; transform: translateY(8px); }
                          to  { opacity: 1; transform: translateY(0); } }

.slide-up          { animation: sfxSlideUp .25s ease-out both; }
.slide-up-delay-1  { animation: sfxSlideUp .25s ease-out .06s both; }
.slide-up-delay-2  { animation: sfxSlideUp .25s ease-out .12s both; }
.slide-up-delay-3  { animation: sfxSlideUp .25s ease-out .18s both; }
.slide-up-delay-4  { animation: sfxSlideUp .25s ease-out .24s both; }
.stagger-item      { animation: sfxSlideUp .25s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Selects com aparência consistente (ícone chevron simples).
   ============================================================ */

select.input-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 34px;
}

/* ============================================================
   Wrapper de página cliente — mantém espaço pro bottom nav.
   ============================================================ */

.page-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Toast (feedback breve, não crítico).
   Mobile-first: aparece no topo com largura contida à viewport,
   sem cortar em telas pequenas. Sem emoji, sem blur decorativo.
   Uso: elemento com classe .sfx-toast + variante .sfx-toast--success | --error | --info.
   ============================================================ */

.sfx-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  min-width: 200px;
  max-width: min(360px, calc(100vw - 24px));
  width: max-content;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  animation: sfxSlideUp .18s ease-out;
  pointer-events: none;
}
.sfx-toast--success { border-left: 3px solid var(--success); }
.sfx-toast--error   { border-left: 3px solid var(--danger); }
.sfx-toast--info    { border-left: 3px solid var(--info); }