/* ═══════════════════════════════════════════════════════
   MINDEX7 — Design System v2
   Baseado no visual do painel real (screenshot 22/04)
   ═══════════════════════════════════════════════════════ */

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

:root {
  --bg:           #0f1923;
  --bg-card:      #162030;
  --bg-card-alt:  #1a2535;
  --border:       rgba(34,197,94,0.15);
  --border-muted: rgba(255,255,255,0.06);
  --green:        #4ade80;
  --green-mid:    #22c55e;
  --green-dark:   #16a34a;
  --red:          #f87171;
  --yellow:       #facc15;
  --text:         #e2e8f0;
  --text-muted:   #64748b;
  --text-sub:     #94a3b8;
}

/* ── Reset base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Navbar ─────────────────────────────────────────────── */
nav {
  background: #0c1520 !important;
  border-bottom: 1px solid rgba(34,197,94,0.18) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.4) !important;
  backdrop-filter: none !important;
}
nav a, nav span, nav button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* ── Todos os cards / painéis ───────────────────────────── */
.bg-gray-900,
.bg-gray-800,
.card,
[class*="bg-gray-9"],
[class*="bg-gray-8"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Arredondamento padrão */
[class*="rounded-2xl"] { border-radius: 16px !important; }
[class*="rounded-xl"]  { border-radius: 12px !important; }

/* ── Card destaque verde (plano popular, pacote etc) ─────── */
.card-destaque,
[class*="border-green-500"],
[class*="bg-green-500/10"] {
  background: linear-gradient(145deg, #162b1e 0%, #162030 100%) !important;
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow: 0 0 24px rgba(34,197,94,0.12), inset 0 1px 0 rgba(34,197,94,0.15) !important;
}

/* ── Hover nos cards ────────────────────────────────────── */
[class*="rounded-2xl"]:not(button):not(a):not(nav) {
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* ── Sub-cards (dentro dos cards principais) ────────────── */
[class*="bg-gray-800/60"],
[class*="bg-gray-800\/60"],
.bg-gray-800\/60 {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}

/* ── Botão verde principal ──────────────────────────────── */
button[class*="bg-green-5"]:not([class*="/"]),
.btn-comprar,
a[class*="bg-green-5"]:not([class*="/"]) {
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-dark) 100%) !important;
  box-shadow: 0 4px 16px rgba(34,197,94,0.3) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  color: #000 !important;
  border: none !important;
  transition: all 0.2s !important;
}
button[class*="bg-green-5"]:not([class*="/"]):hover,
.btn-comprar:hover {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%) !important;
  box-shadow: 0 6px 24px rgba(34,197,94,0.45) !important;
  transform: translateY(-1px) !important;
}
button[class*="bg-green-5"]:disabled,
.btn-comprar:disabled {
  opacity: 0.45 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ── Botão cinza secundário ─────────────────────────────── */
button[class*="bg-gray-8"],
button[class*="bg-gray-7"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 12px !important;
  color: var(--text-sub) !important;
  font-weight: 600 !important;
  transition: all 0.18s !important;
}
button[class*="bg-gray-8"]:hover,
button[class*="bg-gray-7"]:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--text) !important;
}

/* ── Inputs / Selects / Textarea ────────────────────────── */
input, select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(34,197,94,0.6) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.1) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}
select option {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* ── Tipografia ─────────────────────────────────────────── */
h1 {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #f1f5f9 !important;
}
h2 {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f1f5f9 !important;
}
h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.text-4xl, .text-3xl {
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

/* ── Cores de texto ─────────────────────────────────────── */
.text-green-400  { color: var(--green) !important; }
.text-green-300  { color: #86efac !important; }
.text-green-500  { color: var(--green-mid) !important; }
.text-red-400    { color: var(--red) !important; }
.text-yellow-400 { color: var(--yellow) !important; }
.text-gray-400   { color: var(--text-sub) !important; }
.text-gray-500   { color: var(--text-muted) !important; }
.text-gray-600   { color: #475569 !important; }

/* ── Bordas ─────────────────────────────────────────────── */
[class*="border-gray-8"] { border-color: var(--border-muted) !important; }
[class*="border-gray-7"] { border-color: rgba(255,255,255,0.07) !important; }
hr { border-color: var(--border-muted) !important; }

/* ── Badge verde (popular, AUTOMÁTICO etc) ──────────────── */
.badge-popular {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark)) !important;
  box-shadow: 0 3px 12px rgba(34,197,94,0.4) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}
[class*="bg-purple-5"] {
  background: rgba(168,85,247,0.15) !important;
  border-color: rgba(168,85,247,0.3) !important;
  color: #c084fc !important;
}
[class*="bg-blue-5"] {
  background: rgba(59,130,246,0.12) !important;
}

/* ── Glow nos números de destaque (saldo) ───────────────── */
.text-4xl.text-yellow-400,
.text-4xl.font-bold.text-yellow-400 {
  text-shadow: 0 0 18px rgba(250,204,21,0.35) !important;
}
.text-4xl.text-green-400,
.text-3xl.text-green-400 {
  text-shadow: 0 0 18px rgba(74,222,128,0.3) !important;
}

/* ── Código / API key ───────────────────────────────────── */
code {
  font-family: 'Fira Code', 'Cascadia Code', monospace !important;
  background: rgba(34,197,94,0.07) !important;
  border: 1px solid rgba(34,197,94,0.18) !important;
  border-radius: 8px !important;
  font-size: 0.82em !important;
  padding: 2px 8px !important;
  color: var(--green) !important;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(34,197,94,0.25);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,0.45); }

/* ── Modal ──────────────────────────────────────────────── */
[id*="modal"] > div,
[id*="modal-"] > div {
  background: var(--bg-card) !important;
  border: 1px solid rgba(34,197,94,0.2) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
}

/* ── Linhas de tabela / histórico ───────────────────────── */
.space-y-2 > div {
  transition: background 0.15s, padding-left 0.15s !important;
  border-radius: 8px !important;
}
.space-y-2 > div:hover {
  background: rgba(34,197,94,0.05) !important;
  padding-left: 6px !important;
}

/* ── WhatsApp float ─────────────────────────────────────── */
a[href*="wa.me"][style*="position:fixed"] {
  box-shadow: 0 4px 20px rgba(37,211,102,0.5) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
a[href*="wa.me"][style*="position:fixed"]:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.65) !important;
}

/* ── Animação de entrada ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card,
[class*="rounded-2xl"]:not(button):not(a) {
  animation: fadeUp 0.28s ease both;
}

/* ── Banners de alerta (trial, expirado) ────────────────── */
[class*="bg-red-5/1"],
[class*="bg-red-500/1"] {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.3) !important;
}
[class*="bg-yellow-5/1"],
[class*="bg-yellow-500/1"] {
  background: rgba(234,179,8,0.08) !important;
  border-color: rgba(234,179,8,0.28) !important;
}