/* =========================================================
   MU DEMON — THEME.CSS  (reskin moderno, carga al final)
   Diseño azul eléctrico + dorado. Sobrescribe el marco viejo.
   ========================================================= */

:root{
  --bg:#080b14; --bg-2:#0b1120; --surface:#111a2e; --surface-2:#16203a;
  --line:#243252; --line-soft:#1a2540;
  --blue:#2f6fd0; --blue-bright:#4d9bff; --blue-deep:#245595; --blue-glow:rgba(77,155,255,.35);
  --gold:#e8b64c; --gold-bright:#ffd77a; --gold-glow:rgba(232,182,76,.30);
  --text:#cfd9ea; --muted:#8a97b2; --white:#eef3fb;
  --danger:#e0574c; --green:#57d38a;
  --maxw:1180px;
  --fd:"Cinzel",Georgia,"Times New Roman",serif;
  --fb:"Barlow",-apple-system,"Segoe UI",Roboto,sans-serif;
  --fu:"Rajdhani","Barlow",sans-serif;
}

/* ---------- RESET SOBRE EL TEMPLATE VIEJO ---------- */
html,body{min-width:0 !important;}
body{
  margin:0 !important; padding:0 !important;
  background:var(--bg) !important; color:var(--text) !important;
  font-family:var(--fb) !important; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1000px 560px at 50% -10%, rgba(47,111,208,.20), transparent 62%),
    radial-gradient(760px 420px at 100% 8%, rgba(232,182,76,.06), transparent 55%),
    linear-gradient(180deg,#0a0f1c,#080b14 42%) !important;
  background-attachment:fixed !important;
}
.mdx *{box-sizing:border-box;}
.mdx a{color:var(--blue-bright); text-decoration:none; font-weight:600;}
.mdx a:hover{color:var(--gold-bright);}
.mdx img{max-width:100%;}
.mdx h1,.mdx h2,.mdx h3,.mdx h4{margin:0;}

/* neutraliza el header de imagen fija del template viejo */
.all{display:none !important;}

/* ---------- NAV ---------- */
.md-nav{position:sticky; top:0; z-index:200; backdrop-filter:blur(10px);
  background:rgba(8,11,20,.88); border-bottom:1px solid var(--line-soft);}
.md-nav-inner{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px; padding:11px 22px;}
.md-brand{font-family:var(--fd); font-weight:900; letter-spacing:.12em; font-size:1.2rem; white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent !important;}
.md-brand span{color:var(--blue-bright); -webkit-text-fill-color:var(--blue-bright);}
.md-links{display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-left:10px;}
.md-links > a{font-family:var(--fu); font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:8px 12px; border-radius:6px; white-space:nowrap; transition:.15s;}
.md-links > a:hover{color:var(--white); background:var(--surface);}
.md-nav-cta{margin-left:auto; display:flex; gap:8px; align-items:center;}

/* ---------- DROPDOWN (Redes Sociales) ---------- */
.md-dd{position:relative;}
.md-dd-toggle{font-family:var(--fu); font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:8px 12px; border-radius:6px; white-space:nowrap; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:5px; user-select:none;}
.md-dd-toggle .cv{font-size:.65em; transition:transform .15s;}
.md-dd:hover .md-dd-toggle,.md-dd:focus-within .md-dd-toggle{color:var(--white); background:var(--surface);}
.md-dd:hover .md-dd-toggle .cv,.md-dd:focus-within .md-dd-toggle .cv{transform:rotate(180deg);}
.md-dd-menu{position:absolute; top:calc(100% + 4px); left:0; min-width:215px; background:var(--surface-2);
  border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.5); border-radius:9px; padding:6px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s; z-index:300;}
.md-dd:hover .md-dd-menu,.md-dd:focus-within .md-dd-menu{opacity:1; visibility:visible; transform:translateY(0);}
.md-dd-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:6px;
  font-family:var(--fu); font-weight:600; font-size:.86rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text) !important; white-space:nowrap;}
.md-dd-menu a .ic{font-size:1.05rem; width:20px; text-align:center;}
.md-dd-menu a:hover{background:var(--blue-deep); color:#fff !important;}

/* botones */
.md-btn{font-family:var(--fu); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.82rem;
  padding:9px 16px; border-radius:6px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:.15s; display:inline-block; text-align:center;}
.md-btn.ghost{color:var(--text) !important; border-color:var(--line); background:var(--surface);}
.md-btn.ghost:hover{border-color:var(--blue); color:var(--white) !important;}
.md-btn.gold{color:#1a1030 !important; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 18px var(--gold-glow);}
.md-btn.gold:hover{filter:brightness(1.08); color:#1a1030 !important;}
.md-btn.blue{color:#fff !important; background:linear-gradient(180deg,var(--blue-bright),var(--blue)); box-shadow:0 6px 18px var(--blue-glow);}
.md-btn.blue:hover{filter:brightness(1.08); color:#fff !important;}

/* ---------- HERO ---------- */
.md-hero{position:relative; text-align:center; padding:52px 20px 40px; overflow:hidden;}
.md-hero-logo{display:block; margin:0 auto; max-width:620px; width:80%; height:auto;
  mix-blend-mode:screen; filter:drop-shadow(0 6px 30px rgba(232,182,76,.25));}
.md-hero-tag{color:var(--text); font-size:1.12rem; max-width:54ch; margin:14px auto 0; font-style:italic;}
.md-hero-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:24px 0 0;}
.md-hero-btns .md-btn{font-size:.9rem; padding:12px 24px;}

/* live status bar */
.md-live{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px auto 0; max-width:820px;}
.md-live-item{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  padding:9px 16px; border-radius:8px; font-family:var(--fu); font-weight:600; letter-spacing:.04em;}
.md-dot{width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(87,211,138,.55); animation:mdpulse 2s infinite;}
@keyframes mdpulse{0%{box-shadow:0 0 0 0 rgba(87,211,138,.5)}70%{box-shadow:0 0 0 8px rgba(87,211,138,0)}100%{box-shadow:0 0 0 0 rgba(87,211,138,0)}}
.md-live-item .lbl{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;}
.md-live-item .val{color:var(--white);}
.md-live-item .val b{color:var(--gold-bright);}

/* ---------- LAYOUT ---------- */
.md-wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.md-layout{display:grid; grid-template-columns:1fr 340px; gap:24px; padding:24px 0 20px; align-items:start;}
.md-side{display:grid; gap:18px;}
.md-main{min-width:0;}

/* section headers */
.md-block{margin:0 0 26px;}
.md-block-h{display:flex; align-items:baseline; gap:12px; margin:0 0 16px;}
.md-block-h h2{font-family:var(--fd); font-weight:700; font-size:1.4rem; color:var(--white); letter-spacing:.01em;}
.md-block-h h2 b{color:var(--gold);}
.md-block-h .line{flex:1; height:2px; background:linear-gradient(90deg,var(--blue-deep),transparent);}

/* ---------- PANELS ---------- */
.md-panel{background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden;}
.md-panel-h{font-family:var(--fu); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.82rem;
  color:var(--white); padding:12px 16px; background:linear-gradient(90deg,var(--blue-deep),#16345f);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;}
.md-panel-h .i{color:var(--gold-bright);}
.md-panel-b{padding:16px;}

/* ---------- STATS TILES ---------- */
.md-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.md-stat{position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); padding:16px 12px; text-align:center; overflow:hidden;}
.md-stat::before{content:""; position:absolute; top:0; right:0; border-top:14px solid var(--blue); border-left:14px solid transparent;}
.md-stat .k{font-family:var(--fu); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--muted);}
.md-stat .v{font-family:var(--fd); font-weight:900; font-size:1.35rem; color:var(--gold-bright); margin-top:4px; line-height:1.1;}
.md-stat .v small{display:block; font-family:var(--fu); font-size:.76rem; color:var(--blue-bright); font-weight:600;}

/* ---------- CONTENT (loadModule) ---------- */
.md-content{background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.35); padding:22px 24px; color:var(--text);}
.md-content a{color:var(--blue-bright);}
.md-content a:hover{color:var(--gold-bright);}
/* que el modulo de noticias viejo (ancho fijo) sea fluido */
.md-content .news{width:auto !important; max-width:100% !important; margin:0 0 22px !important;}
.md-content .page-title,.md-content h1,.md-content h2{color:var(--white);}

/* ---------- FEATURES ---------- */
.md-feats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.md-feat{background:var(--surface); border:1px solid var(--line-soft); padding:16px; text-align:center;}
.md-feat .ic{font-size:1.6rem; margin-bottom:8px;}
.md-feat h4{font-family:var(--fd); font-weight:700; color:var(--gold-bright); font-size:1rem; margin:0 0 5px;}
.md-feat p{margin:0; font-size:.86rem; color:var(--muted);}

/* ---------- DOWNLOADS ---------- */
.md-dls{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.md-dl{display:flex; align-items:center; gap:12px; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); padding:16px; transition:.15s;}
.md-dl:hover{border-color:var(--blue); transform:translateY(-2px);}
.md-dl .ic{font-size:1.5rem;}
.md-dl .t{font-family:var(--fd); font-weight:700; color:var(--white); font-size:1rem;}
.md-dl .s{font-size:.78rem; color:var(--muted); font-family:var(--fu); text-transform:uppercase; letter-spacing:.06em;}

/* ---------- LOGIN CARD ---------- */
.md-login .hex{width:78px; height:78px; margin:2px auto 12px; display:grid; place-items:center;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(160deg,var(--blue-deep),#0e2748);}
.md-login .hex span{font-family:var(--fd); font-weight:900; font-size:1.5rem; color:var(--gold-bright);}
.md-field{margin:0 0 10px;}
.md-field label{display:block; font-family:var(--fu); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--muted); margin:0 0 5px;}
.md-field input{width:100%; background:#0a1120; border:1px solid var(--line); color:var(--white);
  padding:10px 12px; font-family:var(--fb); font-size:.95rem; border-radius:5px;}
.md-field input:focus{outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(77,155,255,.15);}
.md-login .md-btn{width:100%; margin-top:4px; border:0;}
.md-login .alt{text-align:center; font-size:.82rem; margin-top:12px; color:var(--muted);}
.md-logged{color:var(--text);}
.md-logged .u{font-family:var(--fd); font-weight:700; color:var(--gold-bright); font-size:1.1rem; text-align:center; display:block; margin-bottom:12px;}
.md-logged ul{list-style:none; margin:0 0 12px; padding:0;}
.md-logged li{padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem;}
.md-logged li:last-child{border-bottom:0;}
.md-logged li img{width:18px; height:auto; margin-right:8px; vertical-align:middle; opacity:.85;}
.md-logged li a{color:var(--text) !important;}
.md-logged li a:hover{color:var(--gold-bright) !important;}

/* ---------- SERVER INFO ---------- */
.md-sinfo{list-style:none; margin:0; padding:0;}
.md-sinfo li{display:flex; justify-content:space-between; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line-soft);}
.md-sinfo li:last-child{border-bottom:0;}
.md-sinfo .k{font-family:var(--fu); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--muted);}
.md-sinfo .v{font-family:var(--fd); font-weight:700; color:var(--gold-bright); font-size:1rem;}
.md-sinfo .v small{color:var(--blue-bright); font-family:var(--fu); font-weight:600; font-size:.8rem; margin-left:6px;}

/* ---------- RANKING ---------- */
.md-rank{list-style:none; margin:0; padding:0;}
.md-rank li{display:flex; align-items:center; gap:11px; padding:9px 4px; border-bottom:1px solid var(--line-soft);}
.md-rank li:last-child{border-bottom:0;}
.md-rank .pos{font-family:var(--fd); font-weight:900; font-size:1rem; color:var(--muted); width:22px; text-align:center;}
.md-rank li:nth-child(1) .pos{color:var(--gold-bright);}
.md-rank li:nth-child(2) .pos{color:#cbd5e6;}
.md-rank li:nth-child(3) .pos{color:#d09b5c;}
.md-rank .av{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;}
.md-rank .who{flex:1; min-width:0;}
.md-rank .who a{font-family:var(--fd); font-weight:700; color:var(--white) !important; font-size:.94rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.md-rank .who a:hover{color:var(--gold-bright) !important;}
.md-rank .lv{font-family:var(--fu); font-weight:700; color:var(--blue-bright); font-size:.88rem; white-space:nowrap;}
.md-rank-tabs{display:flex; gap:6px; margin-bottom:12px;}
.md-rank-tabs span{flex:1; text-align:center; font-family:var(--fu); font-weight:700; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.06em; padding:6px 0; color:var(--muted); border-bottom:2px solid var(--line);}
.md-rank-tabs span.on{color:var(--gold-bright); border-color:var(--gold);}

/* ---------- BANNERS ---------- */
.md-pbanner{display:block; position:relative; text-align:center; padding:22px 16px; border:1px solid var(--line);
  overflow:hidden; transition:.15s;}
.md-pbanner:hover{transform:translateY(-2px);}
.md-pbanner .lbl{font-family:var(--fu); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--muted);}
.md-pbanner .big{font-family:var(--fd); font-weight:900; font-size:1.3rem; margin-top:4px; display:block;}
.md-pb-reg{background:linear-gradient(135deg,#0e2748,#16345f);}
.md-pb-reg .big{color:var(--blue-bright);}
.md-pb-don{background:linear-gradient(135deg,#2a2410,#40350f);}
.md-pb-don .big{color:var(--gold-bright);}
.md-pbanner::after{content:""; position:absolute; top:0; right:0; border-top:20px solid rgba(255,255,255,.06); border-left:20px solid transparent;}

/* ---------- FOOTER ---------- */
.md-footer{width:100% !important; height:auto !important; margin-top:40px !important;
  border-top:1px solid var(--line); background:var(--bg-2); padding:34px 22px 44px !important; text-align:center;}
.md-footer .md-brand{font-size:1.3rem; display:inline-block; margin-bottom:8px;}
.md-footer .flinks{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:12px 0;}
.md-footer .flinks a{font-family:var(--fu); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; color:var(--muted) !important;}
.md-footer .flinks a:hover{color:var(--gold-bright) !important;}
.md-footer .small{color:var(--muted); font-size:.78rem; margin-top:12px;}
.md-footer .langflags{margin-top:14px;}
.md-footer .langflags img{margin:0 3px; vertical-align:middle;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .md-layout{grid-template-columns:1fr;}
  .md-side{grid-template-columns:1fr 1fr;}
  .md-side .md-full{grid-column:1/-1;}
  .md-feats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .md-stats{grid-template-columns:repeat(2,1fr);}
  .md-side{grid-template-columns:1fr;}
  .md-feats{grid-template-columns:1fr;}
  .md-dls{grid-template-columns:1fr;}
  .md-nav-cta .md-btn.ghost{display:none;}
  .md-hero-logo{width:92%;}
}