/* =========================================================
   MU LEGEND V2 — visual layer
   Mantiene la estructura y funcionalidad del template default.
   ========================================================= */
:root {
  --ml-bg: #03070d;
  --ml-panel: rgba(7, 16, 27, .92);
  --ml-panel-2: rgba(9, 23, 38, .94);
  --ml-line: rgba(70, 190, 255, .20);
  --ml-line-strong: rgba(80, 205, 255, .42);
  --ml-accent: #39c9ff;
  --ml-accent-2: #7ee7ff;
  --ml-text: #d9e8f3;
  --ml-muted: #8197a7;
  --ml-danger: #ff5268;
  --ml-shadow: 0 18px 50px rgba(0,0,0,.55);
}

html { min-width: 0 !important; }
body.mulegend-v2 {
  color: var(--ml-text);
  background-color: var(--ml-bg) !important;
  background-image:
    radial-gradient(circle at 50% 12%, rgba(34,145,215,.10), transparent 42%),
    linear-gradient(180deg, rgba(1,5,10,.20), rgba(1,5,10,.76)),
    url('../img/background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  font-family: 'Roboto', sans-serif;
}

body.mulegend-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

/* Top bar */
.mulegend-v2 .global-top-bar {
  background: rgba(2,7,13,.92) !important;
  border-bottom: 1px solid rgba(82,190,255,.15);
  padding: 8px 0 6px !important;
  backdrop-filter: blur(10px);
}
.mulegend-v2 .global-top-bar .global-top-bar-content {
  width: min(1420px, calc(100% - 36px)) !important;
}
.mulegend-v2 .global-top-bar a { color: #a8bdca !important; }
.mulegend-v2 .global-top-bar a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(57,201,255,.65); }

/* Hero */
.mulegend-v2 .mu-video-area {
  height: clamp(350px, 45vw, 540px) !important;
  background: #02050a !important;
  border-bottom: 1px solid rgba(74,194,255,.18);
  box-shadow: inset 0 -80px 90px rgba(2,7,13,.85);
}
.mulegend-v2 .mu-video-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1,5,10,.10) 0%, rgba(1,5,10,.06) 48%, rgba(2,8,14,.88) 100%),
    radial-gradient(circle at 50% 52%, transparent 0 22%, rgba(0,0,0,.26) 75%);
  pointer-events: none;
}
.mulegend-v2 .mu-video-area video { filter: saturate(.76) contrast(1.08) brightness(.78); }
.mulegend-v2 .mu-video-area #header { z-index: 3; }
.mulegend-v2 .mu-video-area .webengine-mu-logo {
  max-width: min(440px, 72vw) !important;
  filter: drop-shadow(0 0 18px rgba(75,192,255,.20)) drop-shadow(0 14px 30px rgba(0,0,0,.75));
  transition: transform .35s ease, filter .35s ease;
}
.mulegend-v2 .mu-video-area .webengine-mu-logo:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 0 26px rgba(78,206,255,.35)) drop-shadow(0 16px 34px rgba(0,0,0,.8));
}

/* Counter */
.mulegend-v2 .mu-online-counter {
  width: 410px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: rgba(3,11,19,.72) !important;
  border: 1px solid rgba(83,201,255,.26) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.40), inset 0 0 24px rgba(33,149,220,.06) !important;
  backdrop-filter: blur(12px) !important;
}
.mulegend-v2 .online-title { color: #93e6ff !important; font-size: 9px !important; letter-spacing: 4px !important; }
.mulegend-v2 #onlineCounter { color: #eaf8ff; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mulegend-v2 #onlineCounter span { color: #7fddff; font-weight: 700; }

/* Navigation */
.mulegend-v2 .header-info-container {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(3,9,16,.88) !important;
  border-top: 1px solid rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(73,191,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
}
.mulegend-v2 .header-info,
.mulegend-v2 .headersito { width: 100% !important; max-width: 1480px; margin: 0 auto; }
.mulegend-v2 #navbar { border: 0 !important; backdrop-filter: none !important; }
.mulegend-v2 #navbar ul li a {
  color: #a9bbc7 !important;
  padding: 18px 24px !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .7px;
  position: relative;
}
.mulegend-v2 #navbar ul li a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ml-accent), transparent);
  box-shadow: 0 0 12px rgba(57,201,255,.65);
  transition: left .25s ease, right .25s ease;
}
.mulegend-v2 #navbar ul li a:hover { color: #fff !important; text-shadow: 0 0 14px rgba(57,201,255,.45); }
.mulegend-v2 #navbar ul li a:hover::after { left: 16%; right: 16%; }

/* Main frame */
.mulegend-v2 #container {
  width: min(1500px, calc(100% - 24px)) !important;
  max-width: 1500px !important;
  margin: 18px auto 0 !important;
  padding: 18px 10px 24px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(7,17,28,.93), rgba(3,9,15,.96)) !important;
  border: 1px solid rgba(74,187,247,.15) !important;
  box-shadow: 0 24px 75px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.mulegend-v2 #container::before {
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(78,194,255,.08) !important;
}
.mulegend-v2 #content { padding: 8px 14px !important; }
.mulegend-v2 #content > .row { --bs-gutter-x: 1.15rem; }

/* Generic cards/panels */
.mulegend-v2 .panel-sidebar,
.mulegend-v2 .panel-general,
.mulegend-v2 .panel-addstats,
.mulegend-v2 .panel-downloads,
.mulegend-v2 .panel-news,
.mulegend-v2 .card {
  color: var(--ml-text) !important;
  background: linear-gradient(180deg, rgba(10,24,39,.94), rgba(5,12,20,.96)) !important;
  border: 1px solid rgba(73,185,244,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden;
}
.mulegend-v2 .panel-sidebar > .panel-heading,
.mulegend-v2 .panel-news .panel-heading,
.mulegend-v2 .card-header {
  color: #dff7ff !important;
  background: linear-gradient(90deg, rgba(13,39,61,.92), rgba(7,22,36,.92)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(77,194,255,.20) !important;
  padding: 13px 15px !important;
  font-size: 14px !important;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.mulegend-v2 .panel-news .panel-body,
.mulegend-v2 .panel-news .panel-footer,
.mulegend-v2 .card-body,
.mulegend-v2 .card-footer {
  color: #c7d7e1 !important;
  background: rgba(5,13,22,.86) !important;
  border-color: rgba(72,181,240,.12) !important;
}
.mulegend-v2 .page-title { color: #dff7ff !important; font-family: 'Cinzel', serif !important; font-size: clamp(24px, 3vw, 34px) !important; letter-spacing: .6px; text-shadow: 0 0 18px rgba(57,201,255,.15); }

/* Existing MuTyR sidebars: cool palette, same markup */
.mulegend-v2 .mutyr-box,
.mulegend-v2 .mutyr-user-box {
  background: linear-gradient(180deg, rgba(9,25,42,.97), rgba(4,11,19,.98)) !important;
  border: 1px solid rgba(67,190,255,.25) !important;
  box-shadow: 0 13px 34px rgba(0,0,0,.34), inset 0 0 25px rgba(30,132,205,.06) !important;
}
.mulegend-v2 .mutyr-box::before,
.mulegend-v2 .mutyr-user-box::before {
  background: linear-gradient(90deg, transparent, #42c9ff, #b7efff, #42c9ff, transparent) !important;
  box-shadow: 0 0 13px rgba(66,201,255,.45);
}
.mulegend-v2 .mutyr-header,
.mulegend-v2 .mutyr-user-title { color: #9fe9ff !important; }
.mulegend-v2 .mutyr-header i { color: #53cbff !important; }
.mulegend-v2 .mutyr-banner img {
  border-color: rgba(64,190,255,.24) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,.35) !important;
}
.mulegend-v2 .mutyr-banner img:hover { box-shadow: 0 0 24px rgba(63,192,255,.30) !important; }
.mulegend-v2 .mutyr-user-input { background: rgba(2,9,16,.92) !important; border-color: rgba(68,193,255,.22) !important; }
.mulegend-v2 .mutyr-user-input i { color: #63d4ff !important; }
.mulegend-v2 .mutyr-login-btn {
  background: linear-gradient(90deg, #1479b8, #1fbde8) !important;
  box-shadow: 0 7px 22px rgba(21,154,211,.16);
}

/* Tables */
.mulegend-v2 .table,
.mulegend-v2 .rankings-table,
.mulegend-v2 .general-table-ui,
.mulegend-v2 .myaccount-table {
  color: #cfdee7 !important;
  background: rgba(4,12,20,.88) !important;
  border-color: rgba(70,181,239,.13) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.mulegend-v2 .table thead th,
.mulegend-v2 .rankings-table tr:first-child td,
.mulegend-v2 .general-table-ui tr:first-child td {
  color: #85dcff !important;
  background: rgba(10,31,50,.92) !important;
  border-color: rgba(75,191,248,.15) !important;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.mulegend-v2 .table tbody tr,
.mulegend-v2 .rankings-table tr { transition: background .2s ease; }
.mulegend-v2 .table tbody tr:hover,
.mulegend-v2 .rankings-table tr:hover { background: rgba(47,155,215,.07) !important; }
.mulegend-v2 .table tbody td,
.mulegend-v2 .rankings-table tr td { border-color: rgba(255,255,255,.045) !important; color: #cad8e1; }
.mulegend-v2 .rankings-table-place { color: #62d4ff !important; }

/* Forms */
.mulegend-v2 input[type=text],
.mulegend-v2 input[type=password],
.mulegend-v2 input[type=number],
.mulegend-v2 input[type=email],
.mulegend-v2 select,
.mulegend-v2 textarea,
.mulegend-v2 .form-control {
  color: #d9edf7 !important;
  background: rgba(2,9,16,.90) !important;
  border: 1px solid rgba(75,190,248,.18) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.22);
}
.mulegend-v2 input:focus,
.mulegend-v2 select:focus,
.mulegend-v2 textarea:focus,
.mulegend-v2 .form-control:focus {
  border-color: rgba(66,201,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(57,201,255,.08) !important;
}

/* Buttons */
.mulegend-v2 .btn-primary,
.mulegend-v2 a.btn-primary {
  color: #f4fbff !important;
  background: linear-gradient(180deg, #159ed2, #0a6eaa) !important;
  border-color: rgba(104,220,255,.32) !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 20px rgba(0,133,190,.18);
}
.mulegend-v2 .btn-primary:hover,
.mulegend-v2 a.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 22px rgba(47,193,244,.28) !important;
  transform: translateY(-1px);
}
.mulegend-v2 .btn { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }

/* Links */
.mulegend-v2 a { color: #63d1fb; }
.mulegend-v2 a:hover { color: #c3f2ff !important; }

/* Footer */
.mulegend-v2 .footer {
  width: min(1500px, calc(100% - 24px)) !important;
  margin: 14px auto 50px !important;
  color: #7f96a5 !important;
  background: rgba(4,11,18,.94) !important;
  border: 1px solid rgba(69,185,243,.13) !important;
  border-top: 1px solid rgba(79,198,255,.24) !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 42px rgba(0,0,0,.33);
}
.mulegend-v2 .footer a { color: #9fc7d9 !important; }
.mulegend-v2 .footer a:hover { color: #fff !important; }

/* Selection and scrollbar */
.mulegend-v2 ::selection { background: rgba(50,190,244,.33); color: #fff; }
.mulegend-v2::-webkit-scrollbar { width: 11px; }
.mulegend-v2::-webkit-scrollbar-track { background: #03080d; }
.mulegend-v2::-webkit-scrollbar-thumb { background: #15394d; border: 3px solid #03080d; border-radius: 10px; }
.mulegend-v2::-webkit-scrollbar-thumb:hover { background: #1c536f; }

/* Responsive cleanup: original template forced 1040px */
@media (max-width: 991.98px) {
  .mulegend-v2 .global-top-bar .global-top-bar-content { width: calc(100% - 24px) !important; }
  .mulegend-v2 #container { width: calc(100% - 14px) !important; padding: 10px 4px 18px !important; }
  .mulegend-v2 #content { padding: 6px 8px !important; }
  .mulegend-v2 #navbar ul li a { padding: 14px 11px !important; font-size: 11px !important; }
  .mulegend-v2 .footer { width: calc(100% - 14px) !important; }
}
@media (max-width: 767.98px) {
  .mulegend-v2 .mu-video-area { height: 360px !important; }
  .mulegend-v2 .mu-video-area .webengine-mu-logo { max-width: 300px !important; }
  .mulegend-v2 .mu-online-counter { width: min(360px, 88vw) !important; }
  .mulegend-v2 .header-info-container { position: relative; }
  .mulegend-v2 #navbar ul li { display: block !important; border-bottom: 1px solid rgba(255,255,255,.035); }
  .mulegend-v2 #navbar ul li a { display: block !important; padding: 12px 10px !important; }
  .mulegend-v2 #content > .row > [class*="col-"] { margin-bottom: 12px; }
}

/* ===== MU LEGEND V3: living fantasy layer ===== */
.mulegend-v2 { position:relative; }
.mulegend-v2::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:radial-gradient(circle at 50% 15%, rgba(73,207,255,.055), transparent 32%),
             linear-gradient(115deg, transparent 0 47%, rgba(83,218,255,.018) 50%, transparent 53%);
  mix-blend-mode:screen;
}
.mulegend-v2 .mu-video-area::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:110px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(1,7,12,.95));
}
.mulegend-v2 .webengine-mu-logo {
  filter:drop-shadow(0 0 12px rgba(77,207,255,.28)) drop-shadow(0 16px 28px rgba(0,0,0,.65));
  animation:muLogoFloat 5.5s ease-in-out infinite;
}
@keyframes muLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* live server capsule */
.mulegend-v2 .mu-live-strip {
  width:min(980px,calc(100% - 28px)); margin:-26px auto 16px; position:relative; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:11px 18px; border:1px solid rgba(85,211,255,.23); border-radius:14px;
  background:linear-gradient(180deg,rgba(7,22,34,.94),rgba(2,10,17,.96));
  box-shadow:0 14px 35px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025);
  color:#9eb7c5; text-transform:uppercase; letter-spacing:1.4px; font-size:10px;
}
.mulegend-v2 .mu-live-strip strong { color:#e9f9ff; font-weight:700; }
.mulegend-v2 .mu-live-status { display:flex; align-items:center; justify-content:center; gap:8px; color:#7dffbd; font-weight:800; }
.mulegend-v2 .mu-live-dot { width:8px; height:8px; border-radius:50%; background:#42ffac; box-shadow:0 0 0 5px rgba(66,255,172,.08),0 0 15px rgba(66,255,172,.8); animation:muPulse 1.7s infinite; }
@keyframes muPulse { 50%{opacity:.5; transform:scale(.8)} }
.mulegend-v2 .mu-live-right { text-align:right; }

/* ornamental navbar line */
.mulegend-v2 .header-info-container::before,
.mulegend-v2 .header-info-container::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%); width:min(1180px,88%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(75,202,255,.38),rgba(208,245,255,.6),rgba(75,202,255,.38),transparent);
}
.mulegend-v2 .header-info-container::before { top:0; }
.mulegend-v2 .header-info-container::after { bottom:0; opacity:.55; }
.mulegend-v2 #navbar ul li a { position:relative; overflow:hidden; }
.mulegend-v2 #navbar ul li a::after { content:""; position:absolute; left:50%; right:50%; bottom:5px; height:1px; background:#67d9ff; box-shadow:0 0 8px #67d9ff; transition:.25s ease; }
.mulegend-v2 #navbar ul li a:hover::after { left:20%; right:20%; }

/* cards feel less flat */
.mulegend-v2 .panel, .mulegend-v2 .card, .mulegend-v2 .widget, .mulegend-v2 .module, .mulegend-v2 .sidebar-widget {
  backdrop-filter:blur(5px);
}
.mulegend-v2 .panel:hover, .mulegend-v2 .card:hover { border-color:rgba(83,208,255,.25)!important; }

/* section titles get a rune-like separator */
.mulegend-v2 h1, .mulegend-v2 h2, .mulegend-v2 h3 { text-shadow:0 0 18px rgba(74,200,255,.09); }
.mulegend-v2 h2::after, .mulegend-v2 h3::after { content:" ◆"; color:rgba(84,208,255,.55); font-size:.55em; vertical-align:middle; }

/* floating back-to-top */
.mulegend-v2 #muBackTop { position:fixed; right:22px; bottom:22px; z-index:1000; width:42px; height:42px; border-radius:50%; border:1px solid rgba(90,213,255,.28); background:rgba(3,15,24,.88); color:#8fe3ff; box-shadow:0 8px 25px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.25s; }
.mulegend-v2 #muBackTop.show { opacity:1; pointer-events:auto; }
.mulegend-v2 #muBackTop:hover { transform:translateY(-3px); color:#fff; box-shadow:0 0 22px rgba(64,197,255,.24); }

@media(max-width:767.98px){
 .mulegend-v2 .mu-live-strip{grid-template-columns:1fr; text-align:center; margin-top:-18px;}
 .mulegend-v2 .mu-live-right{text-align:center;}
 .mulegend-v2 .mu-live-strip .mu-live-left{display:none;}
}
@media(prefers-reduced-motion:reduce){ .mulegend-v2 .webengine-mu-logo,.mulegend-v2 .mu-live-dot{animation:none!important;} }

/* ===== MU LEGEND V3.1: WhatsApp flotante ===== */
.mulegend-v2 #muWhatsappFloat {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none !important;
  color: #effff7 !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.42));
  transition: transform .22s ease, filter .22s ease;
}
.mulegend-v2 #muWhatsappFloat:hover {
  transform: translateY(-3px);
  color: #fff !important;
  filter: drop-shadow(0 12px 30px rgba(37,211,102,.24));
}
.mulegend-v2 #muWhatsappFloat .mu-wa-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 29px;
  color: #fff;
  background: linear-gradient(145deg,#2fe071,#16a94e);
  border: 1px solid rgba(190,255,215,.48);
  box-shadow:
    0 0 0 5px rgba(37,211,102,.07),
    0 0 23px rgba(37,211,102,.26),
    inset 0 1px 0 rgba(255,255,255,.28);
  position: relative;
}
.mulegend-v2 #muWhatsappFloat .mu-wa-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(97,255,157,.3);
  animation: muWhatsappRing 2.2s ease-out infinite;
}
.mulegend-v2 #muWhatsappFloat .mu-wa-label {
  padding: 8px 12px 7px;
  border-radius: 9px;
  font-family: 'Roboto',sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.15px;
  white-space: nowrap;
  color: #bfffd5;
  background: rgba(3,16,17,.92);
  border: 1px solid rgba(37,211,102,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  opacity: .88;
  transform: translateX(4px);
  transition: .22s ease;
}
.mulegend-v2 #muWhatsappFloat:hover .mu-wa-label {
  opacity: 1;
  transform: translateX(0);
  border-color: rgba(54,239,122,.46);
  box-shadow: 0 0 20px rgba(37,211,102,.12),0 8px 24px rgba(0,0,0,.34);
}
@keyframes muWhatsappRing {
  0% { transform: scale(1); opacity: .7; }
  72%,100% { transform: scale(1.28); opacity: 0; }
}
@media (max-width: 767.98px) {
  .mulegend-v2 #muWhatsappFloat { right: 14px; bottom: 72px; }
  .mulegend-v2 #muWhatsappFloat .mu-wa-label { display:none; }
  .mulegend-v2 #muWhatsappFloat .mu-wa-icon { width: 50px; height: 50px; font-size: 27px; }
  .mulegend-v2 #muBackTop { right: 18px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mulegend-v2 #muWhatsappFloat .mu-wa-icon::before { animation:none!important; }
}