/* Economía de la clase: Banco, Mercado, apuestas de la ruleta, Juegos y el
   panel de Economía de administración. Usa los colores de styles.css para que
   funcione igual en el tema claro y en el oscuro. */

:root {
  --eco-in: #059669;
  --eco-out: #dc2626;
  --eco-gold: #b7791f;
  --eco-gold-soft: #fef3c7;
  --eco-surface: var(--surface, #fff);
  --eco-surface-2: var(--surface-2, #f8fbff);
}

html.theme-dark {
  --eco-in: #34d399;
  --eco-out: #f87171;
  --eco-gold: #fbbf24;
  --eco-gold-soft: rgba(251, 191, 36, .14);
}

.is-in { color: var(--eco-in); }
.is-out { color: var(--eco-out); }

/* Saldo en la barra superior */
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 39px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--eco-surface);
  color: var(--ink);
  padding: 0 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.balance-chip svg { width: 17px; height: 17px; color: var(--eco-gold); }
.balance-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Cabeceras */
.eco-hero-balance {
  display: grid;
  gap: 2px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--eco-surface);
  padding: 14px 18px;
  text-align: right;
}

.eco-hero-balance small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eco-hero-balance strong { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.04em; }

/* Cifras */
.eco-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.eco-stat {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--eco-surface);
  padding: 12px 14px;
}

.eco-stat b { color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.eco-stat span { color: var(--muted); font-size: 12px; font-weight: 600; }
.eco-stat--main b { color: var(--primary); }
.eco-stat--ok b { color: var(--eco-in); }
.eco-stat--lost b { color: var(--eco-out); }

/* Distribución */
.eco-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.eco-side { display: grid; gap: 16px; align-content: start; }

/* Movimientos */
.eco-tx-list { display: grid; margin: 0; padding: 0; list-style: none; }
.eco-tx-list:has(.eco-tx:nth-child(12)) { max-height: 620px; overflow-y: auto; }

.eco-tx {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--line);
  padding: 10px 2px;
}

.eco-tx:first-child { border-top: 0; }

.eco-tx-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
}

.eco-tx-icon.is-in { background: color-mix(in srgb, var(--eco-in) 14%, transparent); }
.eco-tx-icon.is-out { background: color-mix(in srgb, var(--eco-out) 12%, transparent); }
.eco-tx-main { min-width: 0; }
.eco-tx-main strong { display: block; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.eco-tx-main small, .eco-tx-amount small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.eco-tx-amount { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; }

/* Formularios */
.eco-form { display: grid; gap: 12px; }
.eco-form .primary { justify-self: start; }
.eco-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.eco-note .link-btn { font-size: inherit; }

.eco-facts { display: grid; gap: 0; margin: 0; }
.eco-facts div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 9px 0; }
.eco-facts div:first-child { border-top: 0; padding-top: 0; }
.eco-facts dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.eco-facts dd { margin: 0; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800; }

/* Mercado */
.eco-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.eco-offer { display: flex; flex-direction: column; gap: 10px; }
.eco-offer.is-featured { border-color: var(--eco-gold); box-shadow: 0 0 0 1px var(--eco-gold) inset; }
.eco-offer h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.eco-offer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.eco-offer-top { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-tag-request { background: #fff1e6 !important; color: #c2410c !important; }
.eco-tag-featured { background: var(--eco-gold-soft) !important; color: var(--eco-gold) !important; }
html.theme-dark .eco-tag-request { background: rgba(251, 146, 60, .16) !important; color: #fdba74 !important; }

.eco-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.eco-offer-author { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 700; }
.eco-offer-author .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
.eco-offer-author small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.eco-price { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.eco-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.eco-market-side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.eco-steps { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.eco-steps b { color: var(--ink); }

.eco-orders { display: grid; margin: 0; padding: 0; list-style: none; }
.view > .card + .card, .eco-disputes { margin-bottom: 16px; }
#market > .card { margin-bottom: 16px; }

.eco-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.eco-order:first-child { border-top: 0; padding-top: 0; }
.eco-order strong { display: block; font-size: 13px; }
.eco-order small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.eco-order-price { display: grid; justify-items: end; gap: 3px; font-family: 'Manrope', sans-serif; font-weight: 800; }
.eco-order-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.eco-order-actions:empty { display: none; }

.eco-status { border-radius: 6px; padding: 2px 6px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-style: normal; font-weight: 800; }
.eco-status--pending { background: #e7f1ff; color: var(--primary); }
.eco-status--delivered { background: var(--eco-gold-soft); color: var(--eco-gold); }
.eco-status--disputed { background: color-mix(in srgb, var(--eco-out) 14%, transparent); color: var(--eco-out); }
.eco-status--completed { background: color-mix(in srgb, var(--eco-in) 14%, transparent); color: var(--eco-in); }
.eco-status--cancelled { background: var(--line); color: var(--muted); }
html.theme-dark .eco-status--pending { background: var(--primary-soft, rgba(59, 138, 232, .18)); }

.eco-shop { display: grid; margin: 0; padding: 0; list-style: none; }

.eco-shop li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.eco-shop li:first-child { border-top: 0; padding-top: 0; }
.eco-shop-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--eco-surface-2); font-size: 18px; }
.eco-shop strong { display: block; font-size: 13px; }
.eco-shop small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.eco-kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eco-kind-picker label { cursor: pointer; }
.eco-kind-picker input { position: absolute; opacity: 0; pointer-events: none; }
.eco-kind-picker span { display: grid; gap: 3px; height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.eco-kind-picker small { color: var(--muted); font-size: 11px; }
.eco-kind-picker input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring, rgba(11, 99, 206, .12)); }
.eco-kind-picker input:focus-visible + span { outline: 3px solid var(--ring, rgba(11, 99, 206, .24)); }

/* Apuestas de la ruleta */
.eco-bets .eco-note:first-of-type { margin: 0 0 14px; }
.eco-subhead { margin: 18px 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eco-bet-list { display: grid; margin: 0; padding: 0; list-style: none; }
.eco-bet-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; font-size: 13px; font-weight: 700; }
.eco-bet-list li:first-child { border-top: 0; }
.eco-bet-list small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }

/* Juegos */
.games-hero { background: linear-gradient(112deg, #fff 0%, #fffaf0 55%, #fde7b0 100%); }
html.theme-dark .games-hero { background: linear-gradient(112deg, var(--surface, #111a2b) 0%, #1f1a10 100%); }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.game-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.game-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-card-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.game-card-body h3 { margin: 0; font-size: 18px; }
.game-card-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.game-play { justify-self: start; margin-top: 4px; }
a.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
a.game-card:focus-visible { outline: 3px solid var(--ring, rgba(11, 99, 206, .3)); outline-offset: 3px; }
.game-card--soon { justify-content: center; min-height: 200px; border-style: dashed; background: transparent; text-align: center; }

.games-boards { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.eco-ranking { display: grid; margin: 0; padding: 0; list-style: none; }

.eco-ranking li {
  display: grid;
  grid-template-columns: 30px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 9px 4px;
}

.eco-ranking li:first-child { border-top: 0; }
.eco-ranking li.is-me { border-radius: 10px; background: var(--primary-soft, #e7f1ff); }
.eco-ranking .avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
.eco-rank { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; text-align: center; color: var(--muted); }
.eco-rank-name { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.eco-rank-name em { color: var(--muted); font-style: normal; font-weight: 600; }
.eco-ranking b { font-family: 'Manrope', sans-serif; font-size: 14px; text-align: right; white-space: nowrap; }
.eco-ranking b small { display: block; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; }

/* Panel de administración */
.eco-stats--admin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#economy > .card { margin-bottom: 16px; }
.eco-users-table td { white-space: nowrap; }
.eco-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.eco-admin-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-flows { display: grid; margin: 0; padding: 0; list-style: none; }
.eco-flows li { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 8px 0; font-size: 13px; font-weight: 700; }
.eco-flows li:first-child { border-top: 0; }
.eco-flows small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.eco-flows b { font-family: 'Manrope', sans-serif; }

/* Modo oscuro: superficies propias */
html.theme-dark .balance-chip,
html.theme-dark .eco-hero-balance,
html.theme-dark .eco-stat { background: var(--surface-2, #16223a); }

@media (max-width: 1100px) {
  .eco-admin-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .eco-layout, .games-boards, .eco-market-side, .eco-admin-grid, .eco-admin-grid--two { grid-template-columns: 1fr; }
  .eco-stats, .eco-stats--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .balance-chip { height: 36px; padding: 0 9px; font-size: 12px; }
  .balance-chip svg { display: none; }
  .eco-hero-balance { margin-top: 16px; text-align: left; }
  .eco-kind-picker { grid-template-columns: 1fr; }
  .eco-shop li { grid-template-columns: 36px minmax(0, 1fr); }
  .eco-shop-action { grid-column: 2; }
  .eco-tx-main strong { white-space: normal; }
}

/* Texto solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tienda editable */
.eco-shop-icon svg { width: 20px; height: 20px; color: var(--eco-gold); }
.eco-shop li.is-hidden { opacity: .55; }
.eco-shop-price { display: block; margin-top: 2px; font-family: 'Manrope', sans-serif; font-size: 13px; }
.eco-shop-price s { color: var(--muted); font-weight: 600; }
.eco-discount { border-radius: 6px; background: color-mix(in srgb, var(--eco-out) 14%, transparent); color: var(--eco-out); padding: 1px 5px; font-size: 11px; font-style: normal; }
.eco-shop-tools { display: flex; gap: 12px; margin-top: 4px; }
.eco-danger { color: var(--eco-out) !important; }
.eco-tag-hidden { background: var(--line) !important; color: var(--muted) !important; }
.eco-item-modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.eco-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.eco-icon-option { cursor: pointer; }
.eco-icon-option input { position: absolute; opacity: 0; pointer-events: none; }
.eco-icon-option > span:first-of-type { display: grid; place-items: center; height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.eco-icon-option svg { width: 22px; height: 22px; }
.eco-icon-option input:checked + span { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--ring, rgba(11, 99, 206, .15)); }
.eco-icon-option input:focus-visible + span { outline: 3px solid var(--ring, rgba(11, 99, 206, .3)); }
.eco-item-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eco-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }

/* Panel de admin */
.eco-admin-orders { margin-bottom: 16px; }
.eco-tx-filter { width: auto; max-width: 220px; padding: 7px 10px; }
.eco-tx-list--tall { max-height: 640px; overflow-y: auto; }
.eco-more { margin-top: 12px; }

/* Ruleta: cadenas y candado de la inmunidad */
.roulette-lock { pointer-events: none; }
.roulette-chain ellipse, .roulette-chain rect { fill: none; stroke: #d1d5db; stroke-width: 1.3; filter: drop-shadow(0 .6px .6px rgba(0, 0, 0, .7)); }
.roulette-chain rect { fill: #9ca3af; stroke-width: .6; }
.roulette-padlock rect { fill: #d4af37; stroke: #7a5b12; stroke-width: .8; }
.roulette-shackle { fill: none; stroke: #e5e7eb; stroke-width: 1.8; }
.roulette-keyhole { fill: #3b2a07; }
.roulette-keyhole-line { stroke: #3b2a07; stroke-width: 1; }
.roulette-lock.is-shaking .roulette-lock-body { animation: roulette-lock-shake .12s linear infinite; }
@keyframes roulette-lock-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.2px, .6px); }
  50% { transform: translate(1px, -.8px); }
  75% { transform: translate(-.6px, -1px); }
}
.roulette-shard, .roulette-shatter-ring { position: fixed; z-index: 5; pointer-events: none; }
.roulette-shard { border-radius: 2px; background: linear-gradient(135deg, #f3f4f6, #6b7280); box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
.roulette-shard.is-link { border: 2px solid #d1d5db; border-radius: 40%; background: transparent; }
.roulette-shard.is-gold { background: linear-gradient(135deg, #fde68a, #b8892a); box-shadow: 0 0 8px rgba(251, 191, 36, .8); }
.roulette-shatter-ring { width: 90px; height: 90px; border: 4px solid rgba(253, 230, 138, .9); border-radius: 50%; box-shadow: 0 0 30px rgba(253, 230, 138, .8); }

@media (max-width: 650px) {
  .eco-item-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .roulette-lock.is-shaking .roulette-lock-body { animation: none; }
}

/* Casino abierto / cerrado */
.casino-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--eco-surface); font-size: 13px; }
.casino-status span:last-child { color: var(--muted); }
.casino-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eco-in); box-shadow: 0 0 0 4px color-mix(in srgb, var(--eco-in) 20%, transparent); }

.casino-closed {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid #3a0d16;
  border-radius: 18px;
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 45, 85, .25), transparent 60%), #12060a;
  color: #fde2e8;
}
.casino-closed strong { font-family: 'Manrope', sans-serif; font-size: 18px; }
.casino-closed p { margin: 4px 0 0; color: rgba(253, 226, 232, .78); font-size: 13px; }
.casino-closed-sign {
  flex: none;
  padding: 8px 18px;
  border: 3px solid #ff2d55;
  border-radius: 12px;
  box-shadow: 0 0 12px #ff2d55, inset 0 0 12px rgba(255, 45, 85, .6);
  transform: rotate(-4deg);
}
.casino-closed-sign span {
  display: block;
  color: #ff6b88;
  font: 900 30px/1 'Manrope', sans-serif;
  letter-spacing: .14em;
  text-shadow: 0 0 6px #ff2d55, 0 0 18px #ff2d55, 0 0 34px rgba(255, 45, 85, .7);
  animation: casino-neon 4s infinite;
}
@keyframes casino-neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .35; }
}

.game-card.is-closed { position: relative; cursor: not-allowed; }
.game-card.is-closed img { filter: grayscale(1) brightness(.55); }
.game-card.is-admin-entry { cursor: pointer; }
.game-card-closed {
  position: absolute;
  top: 26%;
  left: 50%;
  padding: 6px 16px;
  border: 3px solid #ff2d55;
  border-radius: 10px;
  background: rgba(18, 6, 10, .75);
  color: #ff6b88;
  font: 900 26px/1 'Manrope', sans-serif;
  letter-spacing: .14em;
  text-shadow: 0 0 8px #ff2d55;
  box-shadow: 0 0 14px #ff2d55;
  transform: translate(-50%, -50%) rotate(-6deg);
}

@media (max-width: 650px) {
  .casino-closed { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .casino-closed-sign span { animation: none; }
}