/* KairSun Web — mock 1:1 de Economía (pantalla 51): Cartera + Tienda.
 *
 * Contenido: cara Cartera (GP de hoy con desglose y tope 100, saldos de Seeds
 * y Suns con sus iconos reales y la aclaración «Seeds y Suns no son dinero») y
 * cara Tienda (los 7 packs del catálogo con vitrina y precios reales en Seeds,
 * los 3 juguetes a 80 Seeds y los estados honestos Legendary «Próximamente» /
 * Mythic «Se gana con Suns»).
 *
 * Reglas duras: solo CSS, sin JS, sin estilos inline, sin prioridad forzada,
 * sin fuentes externas. Prefijo .ec- para no rozar otras pantallas. Todo el
 * interior se mide en calc(N * var(--u)) como pide ks-screens-base.css.
 *
 * Evidencia (repo app, READ-ONLY):
 * - Monedas y precios: lib/systems/economy/commerce_offer_catalog.dart
 *   (packs 1000/2500 Seeds, juguetes 80, Legendary/Mythic no comprables).
 * - Catálogo y vitrina: lib/features/ecosystem/presentation/shop_inventory/
 *   shop_h3_catalog.dart (7 packs, rarezas y colores) y shop_catalog.dart
 *   (descuentos Rare/Epic, packs de Seeds online).
 * - Tienda de monedas: .../screens/currency_store_screen.dart (Suns se ganan,
 *   nunca se compran; compra verificada por la tienda oficial).
 * - GP: lib/systems/economy/gp_economy.dart (tope diario 100; Skills 50,
 *   Rutina 25, Agua 15, Ánimo 10) y gp_area_caps.dart (cada área contra su
 *   tope real).
 * - Copy: lib/l10n/app_es.arb / gen/app_l10n_es.dart (rioplatense).
 */

[data-screen="economy"] {
  --ec-gp: #22c55e;
  --ec-gp-hi: #86efac;
  --ec-water: #2dc4ed;
  --ec-mood: #ffd600;
  --ec-routine: #ffb800;
  --ec-skills: #5bf6ff;
  --ec-seeds: #2baf6a;
  --ec-seeds-hi: #69f0ae;
  --ec-suns: #b88cff;
  --ec-rare: #69c7ff;
  --ec-epic: #e879f9;
  --ec-legendary: #ffcf4a;
  --ec-mythic: #ff8a3d;
  --ec-line: rgba(255, 255, 255, 0.12);
  --ec-surface: rgba(255, 255, 255, 0.05);
  --ec-surface-2: rgba(255, 255, 255, 0.075);
}

/* ── Base de la pantalla ─────────────────────────────────────────────────── */

.ec-sprite {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ec-i {
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: currentColor;
  flex: none;
}

.ec-i--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ec-screen {
  display: block;
}

.ec-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Safe-area superior: la isla del bezel llega hasta 51u. */
  padding-top: calc(44 * var(--u));
  color: var(--ks-text);
  font-family: var(--ks-font);
  background:
    radial-gradient(120% 50% at 50% -12%, rgba(245, 196, 81, 0.10), transparent 62%),
    var(--ks-bg);
}

/* Toggle Cartera | Tienda sobre el contrato de ks-screens-base.css */
.ec-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ec-view .ks-view__tabs {
  align-self: center;
  margin: calc(6 * var(--u)) 0 calc(4 * var(--u));
  flex: none;
}
.ec-view .ks-view__panes {
  flex: 1;
  min-height: 0;
}
.ec-view .ks-pane {
  position: relative;
  height: 100%;
}

.ec-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ec-face--wallet {
  background:
    radial-gradient(120% 42% at 50% -8%, rgba(34, 197, 94, 0.11), transparent 60%),
    var(--ks-bg);
}
.ec-face--shop {
  background:
    radial-gradient(120% 42% at 50% -8%, rgba(43, 175, 106, 0.13), transparent 60%),
    var(--ks-bg);
}

/* ── Cabecera y scroll ───────────────────────────────────────────────────── */

.ec-top {
  flex: none;
  padding: calc(5 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
}
.ec-top__kicker {
  display: block;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1.6 * var(--u));
  color: var(--ks-muted);
}
.ec-top__title {
  margin: calc(2 * var(--u)) 0 0;
  font-family: var(--ks-display);
  font-size: calc(22 * var(--u));
  line-height: 1.1;
}
.ec-top__sub {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  color: var(--ks-text-2);
}

.ec-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
}
.ec-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Paneles compartidos ─────────────────────────────────────────────────── */

.ec-panel {
  border: calc(1 * var(--u)) solid var(--ec-line);
  border-radius: calc(18 * var(--u));
  padding: calc(11 * var(--u));
  background: linear-gradient(160deg, var(--ec-surface-2), rgba(255, 255, 255, 0.02));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, 0.8);
}

.ec-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ec-panel__head h3 {
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 800;
}
.ec-panel__head span {
  font-size: calc(10 * var(--u));
  font-weight: 700;
  color: var(--ks-muted);
}

.ec-fine {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.4;
  color: var(--ks-muted);
}
.ec-fine b {
  color: var(--ks-text-2);
}

/* Chips de estado (progreso, rareza, moneda) */
.ec-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(20 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: 999px;
  border: calc(1 * var(--u)) solid currentColor;
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.ec-chip .ec-i {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.ec-chip--gp { color: var(--ec-gp-hi); }
.ec-chip--seeds { color: var(--ec-seeds-hi); }
.ec-chip--suns { color: var(--ec-suns); }

/* ── Cartera: GP de hoy ──────────────────────────────────────────────────── */

.ec-panel--gp {
  border-color: rgba(34, 197, 94, 0.42);
  box-shadow:
    0 0 calc(24 * var(--u)) calc(-12 * var(--u)) rgba(34, 197, 94, 0.45),
    inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.08);
}
.ec-gphead {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.ec-gpmark {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(13 * var(--u));
  color: var(--ec-gp-hi);
  background: radial-gradient(circle at 35% 30%, rgba(34, 197, 94, 0.38), rgba(34, 197, 94, 0.10));
  border: calc(1 * var(--u)) solid rgba(134, 239, 172, 0.55);
}
.ec-gpmark .ec-i {
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}
.ec-gphead__id {
  flex: 1 1 auto;
  min-width: 0;
}
.ec-gphead__label {
  margin: 0;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1.4 * var(--u));
  color: var(--ec-gp-hi);
}
.ec-gphead__value {
  margin: calc(1 * var(--u)) 0 0;
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
}
.ec-gphead__value strong {
  font-size: calc(28 * var(--u));
  font-weight: 900;
  letter-spacing: calc(-0.6 * var(--u));
  color: var(--ec-gp);
  text-shadow: 0 0 calc(16 * var(--u)) rgba(34, 197, 94, 0.45);
}
.ec-gphead__value span {
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: var(--ks-muted);
}

.ec-bar {
  position: relative;
  height: calc(10 * var(--u));
  margin-top: calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: var(--ec-gp);
}
.ec-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 255, 255, 0.22);
}
.ec-fill--p10 { width: 10%; }
.ec-fill--p42 { width: 42%; }
.ec-fill--p48 { width: 48%; }
.ec-fill--p100 { width: 100%; }

.ec-bar__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.ec-bar__ticks i {
  width: calc(1 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
}

/* ── Cartera: desglose por módulo (topes reales) ─────────────────────────── */

.ec-rows {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
.ec-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--ec-water);
}
.ec-row--water { color: var(--ec-water); }
.ec-row--mood { color: var(--ec-mood); }
.ec-row--routine { color: var(--ec-routine); }
.ec-row--skills { color: var(--ec-skills); }

.ec-row__tag {
  flex: none;
  width: calc(58 * var(--u));
  height: calc(22 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: calc(1 * var(--u)) solid currentColor;
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.3 * var(--u));
  white-space: nowrap;
}
.ec-row__lane {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.ec-row__val {
  flex: none;
  width: calc(46 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(3 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  color: var(--ks-text-2);
  font-variant-numeric: tabular-nums;
}
.ec-row__val .ec-i {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.ec-row__val--full {
  color: var(--ec-gp-hi);
}

/* ── Cartera: saldos de Seeds y Suns ─────────────────────────────────────── */

.ec-panel--balance {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
}
.ec-panel--seeds {
  border-color: rgba(43, 175, 106, 0.42);
}
.ec-panel--suns {
  border-color: rgba(184, 140, 255, 0.42);
}
.ec-coin {
  flex: none;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45));
}
.ec-balance {
  flex: 1 1 auto;
  min-width: 0;
}
.ec-balance__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(5 * var(--u));
}
.ec-balance__value strong {
  font-size: calc(24 * var(--u));
  font-weight: 900;
  letter-spacing: calc(-0.4 * var(--u));
}
.ec-panel--seeds .ec-balance__value strong { color: var(--ec-seeds-hi); }
.ec-panel--suns .ec-balance__value strong { color: var(--ec-suns); }
.ec-balance__value span {
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: calc(1.2 * var(--u));
  color: var(--ks-text-2);
}
.ec-balance__note {
  margin: calc(3 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.35;
  color: var(--ks-muted);
}
.ec-balance__note b {
  color: var(--ks-text-2);
}

/* ── Cartera: aclaración de monedas ──────────────────────────────────────── */

.ec-truth {
  border: calc(1 * var(--u)) solid rgba(245, 196, 81, 0.35);
  border-radius: calc(18 * var(--u));
  padding: calc(11 * var(--u));
  background: linear-gradient(160deg, rgba(245, 196, 81, 0.10), rgba(245, 196, 81, 0.02));
}
.ec-truth h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 800;
  color: var(--ks-gold-hi);
}
.ec-truth h3 .ec-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
.ec-truth ul {
  margin: calc(8 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
.ec-truth li {
  position: relative;
  padding-left: calc(14 * var(--u));
  font-size: calc(10.5 * var(--u));
  line-height: 1.4;
  color: var(--ks-text-2);
}
.ec-truth li::before {
  content: "";
  position: absolute;
  left: calc(3 * var(--u));
  top: calc(6 * var(--u));
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--ks-gold);
}
.ec-truth b {
  color: var(--ks-text);
}

/* ── Tienda: banner de catálogo ──────────────────────────────────────────── */

.ec-banner {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--u));
  margin: 0;
  padding: calc(8 * var(--u));
  border-radius: calc(15 * var(--u));
  border: calc(1 * var(--u)) solid rgba(43, 175, 106, 0.40);
  background: linear-gradient(160deg, rgba(43, 175, 106, 0.15), rgba(43, 175, 106, 0.03));
  font-size: calc(10.5 * var(--u));
  line-height: 1.35;
  color: var(--ks-text-2);
}
.ec-banner .ec-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  margin-top: calc(1 * var(--u));
  color: var(--ec-seeds-hi);
}
.ec-banner b {
  color: var(--ks-text);
}

/* ── Tienda: los 7 packs del catálogo ────────────────────────────────────── */

.ec-packs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
}
.ec-pack {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid var(--ec-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ec-rare);
}
.ec-pack--epic { color: var(--ec-epic); }
.ec-pack--legendary { color: var(--ec-legendary); }
.ec-pack--mythic { color: var(--ec-mythic); }

.ec-pack__art {
  flex: none;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(13 * var(--u));
  border: calc(1 * var(--u)) solid currentColor;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
}
.ec-pack__art img {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45));
}
.ec-pack__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}
.ec-pack__top {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.ec-pack__top b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: var(--ks-text);
}
.ec-rar {
  flex: none;
  min-height: calc(16 * var(--u));
  margin-right: calc(4 * var(--u));
  padding: 0 calc(5 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: calc(1 * var(--u)) solid currentColor;
  font-size: calc(7.5 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.8 * var(--u));
  text-transform: uppercase;
}
.ec-pack__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(9.5 * var(--u));
  line-height: 1.25;
  color: var(--ks-muted);
}
.ec-pack__save {
  font-size: calc(9.5 * var(--u));
  line-height: 1.25;
  font-weight: 800;
  color: currentColor;
}

.ec-price {
  flex: none;
  min-width: calc(56 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: calc(5 * var(--u)) calc(7 * var(--u));
  border-radius: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid currentColor;
  background: rgba(255, 255, 255, 0.05);
}
.ec-price img {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  object-fit: contain;
}
.ec-price b {
  font-size: calc(12 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  color: var(--ks-text);
  font-variant-numeric: tabular-nums;
}
.ec-price small {
  font-size: calc(7.5 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.8 * var(--u));
  color: var(--ks-muted);
}
.ec-price--soon {
  min-width: calc(76 * var(--u));
}
.ec-soon {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  color: currentColor;
}
.ec-soon .ec-i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

/* ── Tienda: juguetes a 80 Seeds ─────────────────────────────────────────── */

.ec-toys {
  border: calc(1 * var(--u)) solid var(--ec-line);
  border-radius: calc(16 * var(--u));
  padding: calc(9 * var(--u));
  background: rgba(255, 255, 255, 0.045);
}
.ec-toys__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ec-toys__head h3 {
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 800;
}
.ec-toys__list {
  list-style: none;
  margin: calc(9 * var(--u)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7 * var(--u));
}
.ec-toy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(7 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  border-radius: calc(13 * var(--u));
  border: calc(1 * var(--u)) solid var(--ec-line);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.ec-toy img {
  width: calc(27 * var(--u));
  height: calc(27 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45));
}
.ec-toy b {
  font-size: calc(11 * var(--u));
  font-weight: 800;
  color: var(--ks-text);
}
.ec-toy small {
  font-size: calc(8.5 * var(--u));
  line-height: 1.25;
  color: var(--ks-muted);
}
.ec-toy em {
  font-style: normal;
  margin-top: calc(2 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 900;
  color: var(--ec-seeds-hi);
  font-variant-numeric: tabular-nums;
}
.ec-toy em img {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

/* ── Tienda: nota de honestidad al pie ───────────────────────────────────── */

.ec-shopfine {
  display: flex;
  align-items: flex-start;
  gap: calc(7 * var(--u));
  margin: 0;
  padding: 0 calc(2 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  color: var(--ks-muted);
}
.ec-shopfine .ec-i {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin-top: calc(1 * var(--u));
  color: var(--ec-legendary);
}
.ec-shopfine b {
  color: var(--ks-text-2);
}

/* ── Foco visible (los radios del toggle los cubre el base) ──────────────── */

[data-screen="economy"] a:focus-visible,
[data-screen="economy"] button:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ks-gold);
  outline-offset: calc(2 * var(--u));
}