/* MercadilloGeek 3.1 · rangos visuales, Super Geeks y moderación Deluxe */

.mg-super-geeks-nav { align-items: center; background: linear-gradient(120deg, #261440, #162f55); border: 1px solid #a664e9 !important; border-radius: 999px; color: #fff !important; display: inline-flex !important; gap: 7px; padding: 4px 10px 4px 4px !important; }
.mg-super-geeks-nav img { border: 2px solid #cda1ff; border-radius: 50%; height: 30px; object-fit: cover; object-position: 55% 28%; width: 30px; }
.mg-super-geeks-nav span { color: #fff; font-size: inherit; font-weight: 850; white-space: nowrap; }

.mg-deluxe-power { align-items: center; background: linear-gradient(120deg, #351053, #7c2ca6 48%, #163c74); border: 1px solid #e3a7ff; border-radius: 10px; box-shadow: 0 0 20px #bd4cff55; color: #fff; display: inline-flex; gap: 7px; overflow: hidden; padding: 6px 9px; position: relative; vertical-align: middle; }
.mg-deluxe-power::after { background: linear-gradient(90deg, transparent, #fff9, transparent); content: ""; inset: 0; position: absolute; transform: translateX(-120%); animation: mg-deluxe-shine 3s ease-in-out infinite; }
.mg-deluxe-power > i { align-items: center; background: #d8ff49; border-radius: 6px; color: #271039; display: flex; font-style: normal; font-weight: 900; height: 25px; justify-content: center; transform: rotate(45deg); width: 25px; }
.mg-deluxe-power > i::first-letter { transform: rotate(-45deg); }
.mg-deluxe-power > span { display: grid; gap: 2px; position: relative; z-index: 1; }
.mg-deluxe-power small { color: #f0d9ff; font: 850 8px/1 monospace; letter-spacing: .6px; }
.mg-deluxe-power b { color: #fff; font-size: 11px; line-height: 1; }
.mg-deluxe-tiny { padding: 4px 6px; }
.mg-deluxe-tiny > i { height: 18px; width: 18px; }
.mg-deluxe-tiny small { display: none; }
.mg-deluxe-profile { border-radius: 13px; padding: 8px 11px; }
.mg-deluxe-profile > i { height: 31px; width: 31px; }
.mg-deluxe-profile b { font-size: 13px; }

.mg-rank-ladder { background: linear-gradient(145deg, #0d1428, #171f3c); border: 1px solid #34456e; border-radius: 22px; box-shadow: 0 22px 60px #05091626; color: #fff; margin: 26px 0; overflow: hidden; padding: 24px; }
.mg-rank-ladder > header { align-items: center; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 20px; }
.mg-rank-ladder h2 { color: #fff; font-size: clamp(23px, 3vw, 32px); margin: 4px 0; }
.mg-rank-ladder header p { color: #cad4eb !important; font-size: 13px; margin: 0; }
.mg-rank-position { background: #d1ff5b; border-radius: 12px; color: #17220d; display: grid; flex: 0 0 auto; font: 850 9px monospace; gap: 4px; max-width: 230px; padding: 10px 13px; }
.mg-rank-position b { color: #17220d; font: 900 13px sans-serif; }
.mg-rank-position.is-inactive { background: #283453; color: #dfe7f8; }
.mg-rank-table { display: grid; gap: 9px; grid-template-columns: repeat(8, minmax(92px, 1fr)); }
.mg-rank-table article { align-items: center; background: #111a30; border: 1px solid #2c3c61; border-radius: 15px; display: flex; flex-direction: column; min-height: 170px; padding: 12px 7px; position: relative; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.mg-rank-table article:hover { border-color: #7a93c4; transform: translateY(-4px); }
.mg-rank-table article.is-complete { background: #15291f; border-color: #41734d; }
.mg-rank-table article.is-current { background: linear-gradient(150deg, #24320f, #162b31); border-color: #b8ff4d; box-shadow: 0 0 24px #8dff363f; transform: translateY(-5px); }
.mg-rank-number { align-self: flex-start; color: #8c9abb; font: 800 9px monospace; }
.mg-rank-processor-icon { align-items: center; background: linear-gradient(145deg, #53637b, #222c42); border: 3px solid #91a2ba; border-radius: 7px; box-shadow: -5px 0 0 -3px #8fa2bb, 5px 0 0 -3px #8fa2bb, 0 -5px 0 -3px #8fa2bb, 0 5px 0 -3px #8fa2bb; color: #e9f2ff; display: flex; font-style: normal; height: 48px; justify-content: center; margin: 15px 0 13px; position: relative; width: 48px; animation: mg-processor-float 3.5s ease-in-out infinite; }
.mg-rank-processor-icon b { color: inherit; font: 900 14px monospace; position: relative; z-index: 2; }
.mg-rank-processor-icon u { background: radial-gradient(circle, #cfff65 0 2px, transparent 3px) 0 0 / calc(100% / var(--mg-cores)) 8px; inset: 5px; opacity: .35; position: absolute; text-decoration: none; }
.mg-rank-table article > strong { color: #fff; font-size: 12px; line-height: 1.15; }
.mg-rank-table article > small { color: #9eabc5; font-size: 10px; margin-top: 5px; }
.mg-rank-table article > em { background: #b9ff4f; border-radius: 999px; bottom: 7px; color: #19320c; font: 900 8px monospace; padding: 5px 7px; position: absolute; }
.mg-rank-table .cpu-386 .mg-rank-processor-icon { background: linear-gradient(145deg, #29786d, #173e45); border-radius: 9px 4px; transform: rotate(2deg); }
.mg-rank-table .cpu-486 .mg-rank-processor-icon { background: linear-gradient(145deg, #3f83c9, #23356b); border-radius: 4px; height: 51px; width: 51px; }
.mg-rank-table .cpu-pentium .mg-rank-processor-icon { background: linear-gradient(145deg, #9c62ba, #4b246e); border-color: #cb9ae8; border-radius: 50% 9px 9px; }
.mg-rank-table .cpu-pentium2 .mg-rank-processor-icon { background: linear-gradient(145deg, #c86378, #6f263b); border-color: #f6a7b9; height: 45px; width: 55px; }
.mg-rank-table .cpu-core2 .mg-rank-processor-icon { background: linear-gradient(145deg, #dd8c32, #713e13); border-color: #ffc67a; border-radius: 12px; transform: rotate(-3deg); }
.mg-rank-table .cpu-i7 .mg-rank-processor-icon { background: linear-gradient(145deg, #19b4cb, #174a73); border-color: #7beaff; box-shadow: 0 0 16px #2ccbe280, -5px 0 0 -3px #7beaff, 5px 0 0 -3px #7beaff, 0 -5px 0 -3px #7beaff, 0 5px 0 -3px #7beaff; }
.mg-rank-table .cpu-i9 .mg-rank-processor-icon { background: linear-gradient(145deg, #b7ff43, #3e8619); border-color: #e6ffa9; box-shadow: 0 0 23px #a8ff53aa, -5px 0 0 -3px #e6ffa9, 5px 0 0 -3px #e6ffa9, 0 -5px 0 -3px #e6ffa9, 0 5px 0 -3px #e6ffa9; color: #15260d; height: 55px; width: 55px; animation-duration: 1.7s; }

.mg-super-geeks-page { background: linear-gradient(#070b18 0, #0c1327 690px, #fff 690px); color: #fff; padding: 28px 0 70px; }
.mg-super-geeks-hero { border: 1px solid #3e3264; border-radius: 28px; box-shadow: 0 30px 90px #0008; margin: 0 auto 48px; max-width: 1420px; min-height: 570px; overflow: hidden; position: relative; width: min(94%, 1420px); }
.mg-super-geeks-hero::after { background: linear-gradient(90deg, #070a18f0 0%, #0a1026a8 36%, transparent 70%), linear-gradient(0deg, #080d1fb8, transparent 55%); content: ""; inset: 0; position: absolute; }
.mg-super-geeks-hero > img { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.mg-super-geeks-hero-copy { left: clamp(26px, 6vw, 90px); max-width: 530px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.mg-super-geek-chip { background: #b9ff4d; border-radius: 999px; color: #17250c; display: inline-flex; font: 900 10px monospace; letter-spacing: 1.4px; padding: 9px 12px; }
.mg-super-geeks-hero h1 { color: #fff; font-size: clamp(55px, 9vw, 112px); letter-spacing: -6px; line-height: .83; margin: 22px 0; text-shadow: 0 8px 30px #000; }
.mg-super-geeks-hero h1 em { color: #b5ff43; display: block; font-style: normal; }
.mg-super-geeks-hero-copy p { color: #ecf2ff !important; font-size: clamp(16px, 2vw, 21px); font-weight: 650; line-height: 1.5; max-width: 440px; }
.mg-hero-avatar { align-items: center; background: #11182dcc; border: 1px solid #b77bff; border-radius: 999px; bottom: 24px; display: flex; gap: 8px; padding: 6px 13px 6px 6px; position: absolute; right: 26px; z-index: 3; }
.mg-hero-avatar i { background: url('../images/super-geeks-hero.png') 56% 23% / 320% auto; border: 2px solid #d6b1ff; border-radius: 50%; height: 42px; width: 42px; }
.mg-hero-avatar b { color: #fff; font: 900 11px monospace; }
.mg-ranking-head { align-items: center; color: #172036; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 28px; }
.mg-ranking-head h2 { color: #11182c; font-size: clamp(30px, 5vw, 52px); letter-spacing: -2px; margin: 6px 0; }
.mg-ranking-head p { color: #556078 !important; margin: 0; }
.mg-live-ranking { background: #e8ffe9; border: 1px solid #a4d7a8; border-radius: 999px; color: #237132; flex: 0 0 auto; font: 900 10px monospace; padding: 10px 13px; }
.mg-geek-podium { align-items: end; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 0 auto 28px; max-width: 980px; }
.mg-podium-place { align-items: center; background: linear-gradient(155deg, #141c35, #232c52); border: 1px solid #43537d; border-radius: 22px; color: #fff; display: flex; flex-direction: column; min-height: 330px; padding: 24px 17px; position: relative; text-align: center; text-decoration: none; }
.mg-podium-place.place-1 { background: linear-gradient(155deg, #32264c, #171f3a); border-color: #c692ff; min-height: 370px; order: 2; transform: translateY(-18px); }
.mg-podium-place.place-2 { order: 1; }
.mg-podium-place.place-3 { order: 3; }
.mg-place-medal { align-items: center; background: #d7e0f0; border-radius: 50%; color: #263149; display: flex; font-size: 18px; font-weight: 900; height: 40px; justify-content: center; position: absolute; right: 16px; top: 15px; width: 40px; }
.place-1 .mg-place-medal { background: #d1ff54; box-shadow: 0 0 20px #b4ff4a88; color: #1f310f; font-size: 23px; }
.place-3 .mg-place-medal { background: #e4a36e; }
.mg-podium-place .mg-avatar { border: 4px solid #66759a; margin: 12px 0; }
.place-1 .mg-avatar { border-color: #ccff62; box-shadow: 0 0 24px #aeff4e55; }
.mg-podium-place h3 { color: #fff; font-size: 20px; margin: 5px 0 10px; }
.mg-podium-place > strong { color: #c9ff61; font-size: 24px; margin-top: 14px; }
.mg-podium-place > small { color: #bac6df; margin-top: 5px; }
.mg-geek-ranking-list { background: #fff; border: 1px solid #dfe4ed; border-radius: 20px; box-shadow: 0 18px 48px #13213a14; overflow: hidden; }
.mg-geek-ranking-list > a { align-items: center; border-bottom: 1px solid #edf0f5; color: #172038; display: grid; gap: 14px; grid-template-columns: 42px 54px 1fr auto 95px; min-height: 82px; padding: 12px 18px; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.mg-geek-ranking-list > a:last-child { border-bottom: 0; }
.mg-geek-ranking-list > a:hover { background: #f5f9ff; transform: translateX(4px); }
.mg-ranking-number { align-items: center; background: #19233d; border-radius: 11px; color: #fff; display: flex; font-size: 17px; height: 36px; justify-content: center; width: 36px; }
.mg-geek-ranking-list > a:nth-child(-n+3) .mg-ranking-number { background: #a7ed3d; color: #1c2f0e; }
.mg-geek-ranking-list > a > div { display: grid; gap: 4px; }
.mg-geek-ranking-list > a > div strong { color: #172038; font-size: 15px; }
.mg-geek-ranking-list > a > div span { color: #69758b; font-size: 12px; }
.mg-geek-ranking-list > a > em { color: #172038; font-size: 25px; font-style: normal; font-weight: 900; text-align: right; }
.mg-geek-ranking-list > a > em small { color: #69758b; display: block; font-size: 9px; text-transform: uppercase; }
.mg-geek-ranking-list > a > i { color: #5d6a83; font-size: 11px; font-style: normal; text-align: right; }
.mg-super-geek-gallery { align-items: stretch; color: #172038; display: grid; gap: 13px; grid-template-columns: 1.25fr repeat(3, 1fr); margin-top: 50px; }
.mg-super-geek-gallery > div { align-self: center; padding-right: 20px; }
.mg-super-geek-gallery h2 { color: #11182c; font-size: 30px; margin: 7px 0; }
.mg-super-geek-gallery p { color: #5d687e !important; }
.mg-super-geek-gallery figure { background: #11182b; border-radius: 17px; margin: 0; overflow: hidden; position: relative; }
.mg-super-geek-gallery img { height: 230px; object-fit: cover; width: 100%; }
.mg-super-geek-gallery figcaption { background: linear-gradient(transparent, #070b18e8); bottom: 0; color: #fff; font-weight: 850; left: 0; padding: 35px 14px 13px; position: absolute; right: 0; }

.mg-admin-members { padding-block: 34px 70px; }
.mg-admin-members-hero { align-items: center; background: linear-gradient(120deg, #0e1529, #302051); border: 1px solid #6f54a4; border-radius: 24px; color: #fff; display: flex; gap: 30px; justify-content: space-between; margin: 18px 0 24px; padding: 28px; }
.mg-admin-members-hero h1 { color: #fff; font-size: 42px; margin: 8px 0; }
.mg-admin-members-hero p { color: #dce5f8 !important; margin: 0; }
.mg-admin-members-hero > div:last-child { display: flex; gap: 10px; }
.mg-admin-members-hero > div:last-child span { background: #121b34; border: 1px solid #5b6689; border-radius: 14px; display: grid; font-size: 11px; padding: 13px 17px; text-align: center; }
.mg-admin-members-hero > div:last-child b { color: #c7ff5c; font-size: 28px; }
.mg-deluxe-roster { background: #f5efff; border: 1px solid #d9bdf2; border-radius: 20px; margin-bottom: 20px; padding: 22px; }
.mg-deluxe-roster header { align-items: center; display: flex; gap: 25px; justify-content: space-between; }
.mg-deluxe-roster h2 { color: #2b1740; margin: 5px 0; }
.mg-deluxe-roster header p { color: #654f78 !important; font-size: 12px; max-width: 570px; }
.mg-deluxe-roster > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mg-deluxe-roster > div > a { align-items: center; background: #fff; border: 1px solid #dec9f0; border-radius: 12px; color: #2c1941; display: flex; gap: 9px; padding: 8px 11px; text-decoration: none; }
.mg-deluxe-roster > div > a span { display: grid; }
.mg-deluxe-roster > div > a small { color: #8b3db2; font: 800 8px monospace; }
.mg-member-search { display: flex; gap: 10px; margin: 20px 0; }
.mg-member-search input { border: 1px solid #cfd6e2; border-radius: 12px; flex: 1; font-size: 15px; padding: 12px 14px; }
.mg-member-management-list { display: grid; gap: 12px; }
.mg-member-management-list > article { align-items: center; background: #fff; border: 1px solid #dfe4ed; border-radius: 17px; display: grid; gap: 13px; grid-template-columns: 62px minmax(210px, 1.2fr) minmax(180px, .7fr) auto minmax(210px, .8fr); padding: 15px; }
.mg-member-management-list > article.is-suspended { background: #fff2f2; border-color: #e4a5a5; }
.mg-member-identity > span { color: #66728a; font: 850 9px monospace; }
.mg-member-identity h2 { font-size: 18px; margin: 4px 0; }
.mg-member-identity h2 a { color: #172038; }
.mg-member-identity p { color: #6c778c !important; font-size: 11px; margin: 0; }
.mg-power-form { align-items: end; display: flex; gap: 6px; }
.mg-power-form label { color: #647087; display: grid; font-size: 9px; font-weight: 850; gap: 4px; }
.mg-power-form select { border: 1px solid #ccd3df; border-radius: 8px; min-height: 37px; padding: 6px; }
.mg-power-form button, .mg-deluxe-form button { background: #202c48; border: 0; border-radius: 9px; color: #fff; cursor: pointer; min-height: 37px; padding: 8px 10px; }
.mg-deluxe-form button { background: #6f2c9d; }
.mg-suspension-form { align-items: center; display: flex; gap: 6px; }
.mg-suspension-form input { border: 1px solid #d5a7a7; border-radius: 8px; min-width: 0; padding: 9px; width: 100%; }
.mg-suspension-form > span { color: #923737; font-size: 10px; }
.mg-danger-button { background: #b52d3d !important; border: 0; border-radius: 9px; color: #fff !important; cursor: pointer; font-weight: 850; padding: 10px 12px; white-space: nowrap; }
.mg-protected-account { color: #758097; font-size: 11px; text-align: center; }
.mg-moderation-control { align-items: center; background: #fff8e9; border: 1px solid #e4c26e; border-radius: 17px; display: grid; gap: 15px; grid-template-columns: auto 1fr minmax(270px, .8fr); margin: 18px 0 28px; padding: 18px; }
.mg-moderation-control.is-suspended { background: #fff0f0; border-color: #d89191; }
.mg-moderation-control h3 { color: #402d0d; margin: 0 0 4px; }
.mg-moderation-control p { color: #765f35 !important; font-size: 12px; margin: 0; }
.mg-moderation-control form { align-items: end; display: flex; gap: 7px; }
.mg-moderation-control label { color: #6b5834; display: grid; flex: 1; font-size: 10px; font-weight: 800; gap: 4px; }
.mg-moderation-control textarea { border: 1px solid #d5bc83; border-radius: 8px; padding: 8px; resize: vertical; }
.mg-suspended-badge { background: #b5293a; border-radius: 999px; color: #fff; font: 900 9px monospace; padding: 8px 10px; }
.mg-deluxe-console { align-items: center; background: linear-gradient(120deg, #24123d, #15446a); border: 1px solid #a760d7; border-radius: 17px; color: #fff; display: flex; gap: 14px; margin: 18px 0; padding: 16px; }
.mg-deluxe-console > span { color: #d9ff65; font: 900 11px monospace; }
.mg-deluxe-console p { color: #dae6fa !important; flex: 1; font-size: 12px; margin: 0; }
.mg-story-sponsorship { background: linear-gradient(145deg, #172f25, #111b31) !important; border-color: #65a871 !important; }
.mg-story-sponsorship::before { content: "🤝"; float: right; font-size: 44px; margin: 0 0 10px 15px; }
.mg-story-inline-link { color: #c9ff71 !important; display: inline-block; font-weight: 850; margin-top: 8px; }

@keyframes mg-processor-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mg-deluxe-shine { 0%, 35% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } }

@media (max-width: 1100px) {
  .mg-rank-table { grid-template-columns: repeat(4, 1fr); }
  .mg-member-management-list > article { grid-template-columns: 58px 1fr 1fr; }
  .mg-member-identity { grid-column: 2 / -1; }
  .mg-suspension-form { grid-column: 1 / -1; }
  .mg-super-geek-gallery { grid-template-columns: repeat(3, 1fr); }
  .mg-super-geek-gallery > div { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mg-super-geeks-nav { padding: 4px !important; }
  .mg-super-geeks-nav span { display: none; }
  .mg-super-geeks-hero { border-radius: 18px; min-height: 590px; }
  .mg-super-geeks-hero > img { object-position: 58% center; }
  .mg-super-geeks-hero::after { background: linear-gradient(0deg, #070a18f5 0%, #090e22b5 62%, transparent 100%); }
  .mg-super-geeks-hero-copy { bottom: 35px; left: 22px; right: 22px; top: auto; transform: none; }
  .mg-super-geeks-hero h1 { font-size: clamp(55px, 18vw, 82px); letter-spacing: -4px; }
  .mg-hero-avatar { display: none; }
  .mg-ranking-head, .mg-rank-ladder > header, .mg-admin-members-hero, .mg-deluxe-roster header { align-items: flex-start; flex-direction: column; }
  .mg-geek-podium { align-items: stretch; grid-template-columns: 1fr; }
  .mg-podium-place.place-1, .mg-podium-place.place-2, .mg-podium-place.place-3 { min-height: 300px; order: initial; transform: none; }
  .mg-geek-ranking-list > a { grid-template-columns: 36px 44px 1fr auto; padding: 10px; }
  .mg-geek-ranking-list > a > i { display: none; }
  .mg-geek-ranking-list > a > em { font-size: 19px; }
  .mg-super-geek-gallery { grid-template-columns: 1fr; }
  .mg-super-geek-gallery > div { grid-column: auto; }
  .mg-rank-ladder { padding: 17px 12px; }
  .mg-rank-table { grid-template-columns: repeat(2, 1fr); }
  .mg-member-search { flex-direction: column; }
  .mg-member-management-list > article { grid-template-columns: 50px 1fr; }
  .mg-member-identity { grid-column: 2; }
  .mg-power-form, .mg-deluxe-form, .mg-suspension-form, .mg-protected-account { grid-column: 1 / -1; }
  .mg-power-form, .mg-suspension-form { align-items: stretch; flex-direction: column; }
  .mg-moderation-control { align-items: stretch; grid-template-columns: 1fr; }
  .mg-moderation-control form { align-items: stretch; flex-direction: column; }
  .mg-deluxe-console { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-rank-processor-icon, .mg-deluxe-power::after { animation: none !important; }
}