/*
 * economy.css — Piofly · Premios (FZ + cómo ganar)
 * Tokens de global.css → claro/oscuro + color de sector. FZ = verde.
 */
.eco-page { --money: var(--green); --money-dark: var(--green-dark); }
.eco-page {
  min-height: 100vh; color: var(--text-main);
  background:
    radial-gradient(1000px 340px at 50% -140px, color-mix(in srgb, var(--money) 16%, transparent), transparent 70%),
    var(--bg-main);
  padding-bottom: 92px;
}
@media (min-width: 900px) { .eco-page { padding-bottom: 44px; } }
.eco-wrap { max-width: 960px; margin: 0 auto; padding: 20px 16px 40px; }
@media (min-width: 640px) { .eco-wrap { padding: 28px 24px 48px; } }

/* ─── Balance ─── */
.eco-balance {
  position: relative; overflow: hidden; border-radius: 24px; padding: 30px 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--money) 26%, var(--bg-panel)), var(--bg-panel) 70%);
  border: 1px solid color-mix(in srgb, var(--money) 30%, var(--border-soft));
  box-shadow: var(--shadow-lg); text-align: center;
}
.eco-balance::after {
  content: ""; position: absolute; top: -50px; right: -30px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--money) 30%, transparent), transparent 70%); pointer-events: none;
}
.eco-coin { font-size: 40px; line-height: 1; }
.eco-amount { font-size: 3rem; font-weight: 900; letter-spacing: -2px; color: var(--money-dark); line-height: 1; margin: 6px 0 2px; }
.eco-amount .eco-unit { font-size: 1.3rem; margin-left: 4px; }
.eco-balance-label { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.eco-balance-sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 800; color: var(--text-soft); background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding: 6px 12px; border-radius: 999px; }

/* ─── Cómo ganar ─── */
.eco-section-title { font-size: 1.2rem; font-weight: 900; letter-spacing: -.3px; margin: 28px 0 6px; }
.eco-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; }
.eco-earn-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .eco-earn-grid { grid-template-columns: 1fr 1fr; } }
.eco-earn {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 16px;
  box-shadow: var(--shadow-xs); transition: transform .16s, box-shadow .16s, border-color .16s;
  text-decoration: none; color: inherit;
}
.eco-earn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.eco-earn-ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--money) 20%, var(--bg-panel)), color-mix(in srgb, var(--primary) 14%, var(--bg-panel)));
  border: 1px solid var(--border-soft); color: var(--money-dark);
}
.eco-earn-body { flex: 1; min-width: 0; }
.eco-earn-title { font-size: 14px; font-weight: 800; color: var(--text-main); }
.eco-earn-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.eco-reward {
  flex-shrink: 0; font-size: 12.5px; font-weight: 900; padding: 5px 11px; border-radius: 999px;
  color: var(--money-dark); background: color-mix(in srgb, var(--money) 16%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--money) 32%, transparent); white-space: nowrap;
}

/* ─── Canjear (próximamente) ─── */
.eco-soon {
  margin-top: 28px; border-radius: 20px; padding: 24px; text-align: center;
  background: var(--bg-panel); border: 1.5px dashed var(--border-mid); color: var(--text-soft);
}
.eco-soon i { font-size: 34px; color: var(--money); display: block; margin-bottom: 8px; }
.eco-soon h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; color: var(--text-main); }
.eco-soon p { margin: 0; font-size: 13px; }

/* Dinero verde en el header */
.eco-page .hstat--coins i { color: var(--money) !important; }
.eco-page .hstat--coins { border-color: color-mix(in srgb, var(--money) 32%, transparent) !important; }
@media (max-width: 500px) { .eco-page .hstat-text { display: inline !important; opacity: 1 !important; } }