/* ═══════════════════════════════════════════════════════════════
   servidores-academy.css — JuegosDrag Biblioteca + Academia
   ═══════════════════════════════════════════════════════════════ */

/* ── Punch filters ────────────────────────────────────────────── */
.jd-punch-filter{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);color:var(--bs-secondary-color);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.jd-punch-filter:hover{border-color:#7367f0;color:#7367f0}
.jd-punch-filter.active{background:linear-gradient(135deg,#7367f0,#5e50ee);color:#fff;border-color:#7367f0}

/* ── Punch task cards ─────────────────────────────────────────── */
.jd-punch-task{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--bs-card-bg);border:1px solid var(--bs-border-color);border-radius:16px;transition:all .3s ease;text-decoration:none;color:var(--bs-body-color);position:relative;overflow:hidden;min-height:100px}
.jd-punch-task:hover{transform:translateY(-3px);border-color:#7367f0;box-shadow:0 10px 30px rgba(115,103,240,.15);color:var(--bs-heading-color)}
.jd-punch-task.is-done{border-color:rgba(76,175,80,.4);background:rgba(76,175,80,.04)}
.jd-punch-task.is-done::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#4caf50;border-radius:4px 0 0 4px}
.jd-punch-task .pt-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.jd-punch-task .pt-info{flex:1;min-width:0}
.jd-punch-task .pt-title{font-weight:700;font-size:1rem;margin-bottom:4px;color:var(--bs-heading-color)}
.jd-punch-task .pt-cat{font-size:.72rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.5px}
.jd-punch-task .pt-xp{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.9rem;flex-shrink:0;padding:8px 16px;border-radius:10px;text-align:center;min-width:80px}
.jd-punch-task .pt-status{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
@media(max-width:768px){.jd-punch-task{flex-wrap:wrap;gap:12px;padding:16px}.jd-punch-task .pt-xp{width:100%;text-align:center}.jd-punch-filters{overflow-x:auto}}

/* ── All-missions modal ───────────────────────────────────────── */
#all-missions-modal .mission-grid-card{background:var(--bs-card-bg);border:1px solid var(--bs-border-color);border-radius:14px;padding:16px;text-align:center;text-decoration:none;color:var(--bs-body-color);transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:140px;justify-content:center;cursor:pointer}
#all-missions-modal .mission-grid-card:hover{transform:translateY(-4px);border-color:#7367f0;box-shadow:0 10px 25px rgba(115,103,240,.2)}
#all-missions-modal .mission-grid-card .mgc-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
#all-missions-modal .mission-grid-card .mgc-title{font-family:'Cinzel',serif;font-weight:700;font-size:.85rem;line-height:1.2;color:var(--bs-heading-color)}
#all-missions-modal .mission-grid-card .mgc-cat{font-size:.7rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.5px}
#all-missions-modal .mission-grid-card.is-done{border-color:rgba(76,175,80,.5);background:rgba(76,175,80,.05)}
#all-missions-modal .mission-grid-card.is-wip{border-color:rgba(255,159,67,.5);background:rgba(255,159,67,.05)}
#all-missions-modal .filter-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);color:var(--bs-secondary-color);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
#all-missions-modal .filter-pill:hover{border-color:#7367f0;color:#7367f0}
#all-missions-modal .filter-pill.active{background:linear-gradient(135deg,#7367f0,#5e50ee);color:#fff;border-color:#7367f0}

/* ── Hero box ─────────────────────────────────────────────────── */
.st-hero-box{display:flex;gap:15px;height:420px;width:100%;box-sizing:border-box}
.st-hero-main{flex:1;position:relative;border-radius:var(--jd-radius);overflow:hidden;background:#050505;border:1px solid var(--jd-border);box-shadow:var(--jd-glow-purple);contain:layout style}
.st-hero-main img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease,opacity .4s ease;opacity:.85;will-change:transform}
.st-hero-main:hover img{transform:scale(1.05)}
.st-hero-info{position:absolute;bottom:0;width:100%;padding:40px 30px 30px;background:linear-gradient(0deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.8) 40%,transparent 100%);pointer-events:none}
.st-hero-title{font-family:var(--jd-font-display);font-size:2.5rem;font-weight:800;color:#fff;text-shadow:0 2px 15px rgba(115,103,240,.6);margin:0 0 12px;line-height:1.1}
.st-hero-btn{pointer-events:all;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--jd-purple) 0%,#5a52c9 100%);color:#fff !important;padding:10px 28px;border-radius:8px;font-size:.85rem;font-family:var(--jd-font-mono);font-weight:bold;text-decoration:none;border:1px solid rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px rgba(115,103,240,.4);transition:transform .3s,box-shadow .3s}
.st-hero-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(115,103,240,.6)}
.st-hero-progress{position:absolute;bottom:0;left:0;height:4px;background:var(--jd-cyan);z-index:5;transition:width linear;box-shadow:0 0 12px var(--jd-cyan)}
.st-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.st-hero-badge{font-size:.65rem;font-family:var(--jd-font-mono);font-weight:bold;text-transform:uppercase;padding:4px 10px;border-radius:6px;letter-spacing:.5px;backdrop-filter:blur(4px)}
.st-hero-badge.recomendado{background:rgba(245,200,66,.2);color:var(--jd-gold);border:1px solid rgba(245,200,66,.5)}
.st-hero-badge.estado{background:rgba(86,202,0,.2);color:var(--jd-green);border:1px solid rgba(86,202,0,.4)}
.st-hero-side{width:280px;display:flex;flex-direction:column;gap:12px;flex-shrink:0;overflow-y:auto;scrollbar-width:none;padding-right:5px}
.st-side-item{flex:0 0 auto;height:95px;border-radius:var(--jd-radius);border:2px solid transparent;overflow:hidden;cursor:pointer;opacity:.5;transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s;background:var(--jd-bg-card);position:relative}
.st-side-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.st-side-item .st-side-label{position:absolute;inset:0;padding:15px;font-size:.8rem;font-family:var(--jd-font-mono);font-weight:bold;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.2) 100%);display:flex;align-items:flex-end;transition:padding .3s,color .3s}
.st-side-item.active{opacity:1;border-color:var(--jd-purple);transform:translateX(-5px);box-shadow:var(--jd-glow-purple)}
.st-side-item.active img{transform:scale(1.1)}
.st-side-item.active .st-side-label{padding-bottom:20px;color:var(--jd-cyan)}

/* ── Steam section ────────────────────────────────────────────── */
.jd-steam-section{background:var(--jd-bg-card);border:1px solid var(--jd-border);border-radius:var(--jd-radius);padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.jd-steam-tabs-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:20px;position:relative;background:rgba(0,0,0,.2);padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}
.jd-steam-tabs{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;gap:6px}
.jd-tabs-arrow{flex-shrink:0;background:rgba(115,103,240,.1);border:1px solid rgba(115,103,240,.2);color:var(--jd-purple-lt);width:36px;height:36px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,box-shadow .2s;z-index:5}
.jd-tabs-arrow:hover{background:var(--jd-purple);color:#fff;box-shadow:var(--jd-glow-purple)}
.jd-tabs-arrow.hidden{opacity:0;pointer-events:none}
.jd-stab{background:transparent;border:none;color:var(--jd-text-muted);padding:10px 20px;border-radius:6px;cursor:pointer;transition:color .3s,background .3s,border-color .3s;white-space:nowrap;font-size:.9rem;font-family:var(--jd-font-ui);font-weight:600}
.jd-stab.active{background:rgba(115,103,240,.15);color:var(--jd-cyan);border:1px solid rgba(115,103,240,.3);box-shadow:inset 0 0 10px rgba(115,103,240,.1)}
.jd-stab:hover:not(.active){color:var(--jd-text);background:rgba(255,255,255,.05)}
.jd-tab-panel{display:flex;gap:24px;width:100%}
.jd-featured{flex:1.6;border-radius:12px;overflow:hidden;position:relative;background:#0a0a0a;border:1px solid var(--jd-border)}
.jd-feat-img{width:100%;height:300px;object-fit:cover;display:block;border-bottom:1px solid rgba(255,255,255,.05);transition:opacity .3s}
.jd-feat-info{padding:20px;background:linear-gradient(180deg,#0a0a0a 0%,#111 100%)}
.jd-feat-name{font-size:1.5rem;font-family:var(--jd-font-display);font-weight:700;color:#fff;margin-bottom:8px}
.jd-feat-desc{font-size:.9rem;color:#aaa;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.jd-feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.jd-feat-tag{background:rgba(115,103,240,.15);color:var(--jd-purple-lt);padding:4px 10px;border-radius:4px;font-family:var(--jd-font-mono);font-size:.65rem;text-transform:uppercase;border:1px solid rgba(115,103,240,.3)}
.jd-list{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:500px;padding-right:5px}
.jd-list-item{display:flex;align-items:center;gap:14px;padding:12px;background:rgba(255,255,255,.02);border-radius:10px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s}
.jd-list-item.active{background:rgba(115,103,240,.1);border-color:var(--jd-purple);box-shadow:0 4px 15px rgba(0,0,0,.2)}
.jd-list-item:hover:not(.active){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.jd-item-thumb{width:80px;height:50px;object-fit:cover;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.jd-item-info{flex:1;min-width:0}
.jd-item-name{font-size:.95rem;font-weight:700;color:var(--jd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.jd-item-sub{font-size:.75rem;color:var(--jd-text-muted);font-family:var(--jd-font-mono)}

/* ── Categorías ───────────────────────────────────────────────── */
.jd-steam-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.jd-scat-card{position:relative;height:120px;border-radius:12px;overflow:hidden;text-decoration:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--jd-border);transition:transform .3s,border-color .3s,box-shadow .3s;background:#111}
.jd-scat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(115,103,240,.2) 0%,transparent 100%);opacity:0;transition:opacity .3s}
.jd-scat-card:hover{transform:translateY(-5px) scale(1.02);border-color:var(--jd-purple);box-shadow:var(--jd-glow-purple);z-index:2}
.jd-scat-card:hover::before{opacity:1}
.jd-scat-icon{font-size:2.5rem;position:absolute;opacity:.15;right:-10px;bottom:-15px;transition:opacity .3s,color .3s,transform .3s;transform:rotate(-15deg)}
.jd-scat-card:hover .jd-scat-icon{opacity:.4;color:var(--jd-cyan);transform:rotate(0deg) scale(1.2)}
.jd-scat-title{position:relative;z-index:2;font-family:var(--jd-font-display);font-size:1rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.8);padding:0 15px}

/* ── Filter bar ───────────────────────────────────────────────── */
.jd-catalog-hub{background:transparent}
.jd-filter-bar{background-color:rgba(20,15,25,.9);background-image:url('https://juegosdrag.com/css/texturas/wood-pattern.png');background-blend-mode:overlay;border:1px solid var(--jd-border);border-radius:var(--jd-radius);padding:15px 20px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 0 30px rgba(0,0,0,.5)}
.jd-filter-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jd-filter-bar select{background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(115,103,240,.3);padding:8px 15px;border-radius:8px;font-family:var(--jd-font-ui);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;cursor:pointer}
.jd-filter-bar select:focus,.jd-filter-bar select:hover{border-color:var(--jd-cyan);box-shadow:0 0 10px rgba(0,229,255,.2)}
.jd-catalog-meta{font-family:var(--jd-font-mono);font-size:.75rem;color:var(--jd-text-muted);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:15px}
.jd-catalog-meta b{color:var(--jd-cyan);font-size:.9rem}

/* ── Ribbon ───────────────────────────────────────────────────── */
.jd-ribbon-section{position:relative;width:100%;overflow-x:clip;overflow-y:visible}
.jd-ribbon-track{display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:stretch;gap:20px;width:100%;padding:15px 0;scroll-behavior:smooth;scrollbar-width:none;box-sizing:border-box}
.jd-ribbon-track::-webkit-scrollbar{display:none}
#allEntries{display:none !important}
.jd-ribbon-track .entryBlock{flex:0 0 calc(33.333% - 14px) !important;width:calc(33.333% - 14px) !important;max-width:calc(33.333% - 14px) !important;min-width:0 !important;margin:0 !important;box-sizing:border-box !important;overflow:visible !important}
.jd-ribbon-track .entryBlock .card{height:100%;display:flex;flex-direction:column;background:var(--jd-bg-card) !important;border:1px solid var(--jd-border) !important;border-radius:var(--jd-radius) !important;transition:transform .3s cubic-bezier(.25,.8,.25,1),border-color .3s,box-shadow .3s !important;overflow:hidden}
.jd-ribbon-track .entryBlock:hover .card{transform:translateY(-6px) !important;border-color:var(--jd-purple) !important;box-shadow:0 15px 35px rgba(0,0,0,.3),var(--jd-glow-purple) !important}
.jd-ribbon-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(20,20,25,.9);color:var(--jd-cyan);border:1px solid rgba(0,229,255,.3);border-radius:50%;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 4px 15px rgba(0,0,0,.5)}
.jd-ribbon-arrow:hover{background:var(--jd-purple);color:#fff;border-color:var(--jd-purple);box-shadow:var(--jd-glow-purple);transform:translateY(-50%) scale(1.1)}
.jd-ribbon-arrow.hidden{opacity:0;pointer-events:none}
.jd-ribbon-arrow-left{left:-10px}
.jd-ribbon-arrow-right{right:-10px;left:auto}

/* ── Widgets ──────────────────────────────────────────────────── */
.jd-widget{background:var(--jd-bg-card);border:1px solid var(--jd-border);border-radius:var(--jd-radius);margin-bottom:20px;overflow:hidden}
.jd-widget__head{background:rgba(115,103,240,.05);border-bottom:1px solid var(--jd-border);padding:15px 20px;display:flex;align-items:center;gap:10px}
.jd-widget__head-icon{color:var(--jd-gold);font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.jd-widget__head-title{font-family:var(--jd-font-display);font-size:.95rem;font-weight:700;color:var(--jd-text);letter-spacing:.05em}
.jd-widget__body{padding:20px}

/* ── Agite widget ─────────────────────────────────────────────── */
.jd-agite-widget{border-color:rgba(245,200,66,.4);background:linear-gradient(180deg,rgba(20,20,20,1) 0%,rgba(30,25,10,1) 100%);position:relative;overflow:hidden}
.jd-agite-widget::before{content:'';position:absolute;top:-50px;right:-50px;width:100px;height:100px;background:var(--jd-gold);filter:blur(60px);opacity:.3;pointer-events:none}
.dice-toolbar-wrapper{cursor:pointer;perspective:1000px;display:block;width:100%;text-align:center}
.floating-dice{font-size:4.5rem;display:inline-block;cursor:pointer;animation:floatDice 3s ease-in-out infinite;filter:drop-shadow(0 10px 15px rgba(245,200,66,.6));transition:transform .2s,filter .2s;line-height:1}
.dice-toolbar-wrapper:hover .floating-dice{transform:scale(1.2) rotate(15deg);filter:drop-shadow(0 15px 25px rgba(245,200,66,.9));animation-play-state:paused}
@keyframes floatDice{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(10deg)}}

/* ── Gradient text animado ────────────────────────────────────── */
.jd-multicolor-title{background:linear-gradient(to right,#00f2fe,#736efe,#ec4899,#f59e0b);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--jd-font-display);font-weight:800;text-transform:uppercase;animation:multicolor-flow 5s ease infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
@keyframes multicolor-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes agitePop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.agite-animated{animation:agitePop .4s cubic-bezier(.175,.885,.32,1.275) forwards}

/* ── Informador AO ────────────────────────────────────────────── */
#informador-ao{background-color:rgba(20,15,25,.9);background-image:url('https://juegosdrag.com/css/texturas/wood-pattern.png');background-blend-mode:overlay;border:1px solid var(--jd-purple);padding:20px;border-radius:var(--jd-radius);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.3),inset 0 0 30px rgba(0,0,0,.6)}
#informador-ao img{width:60px;height:60px;margin-bottom:15px;filter:drop-shadow(0 0 10px var(--jd-cyan))}
#frase-dragon{font-style:italic;font-size:.95rem;line-height:1.5;color:var(--jd-cyan);margin-bottom:15px;text-shadow:0 2px 4px rgba(0,0,0,.8);min-height:60px;display:flex;align-items:center;justify-content:center}

/* ── Ticker ────────────────────────────────────────────────────── */
.jd-ticker{background:var(--bs-tertiary-bg,rgba(115,103,240,.06));border:1px solid var(--jd-border);border-radius:8px;padding:9px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;overflow:hidden}
.jd-ticker__label{font-family:var(--jd-font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jd-gold);white-space:nowrap;display:flex;align-items:center;gap:6px}
.jd-ticker__track{overflow:hidden;flex:1}
.jd-ticker__content{white-space:nowrap;font-size:.8rem;color:var(--jd-text-muted);animation:tickerScroll 30s linear infinite}
.jd-ticker__content span{margin-right:60px}
@keyframes tickerScroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ── Forced modal ─────────────────────────────────────────────── */
#forced-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.forced-card{background:var(--jd-bg-card);border:1px solid var(--jd-purple);padding:25px;border-radius:15px;max-width:500px;width:90%;position:relative;box-shadow:var(--jd-glow-purple)}
.orbe-dragon{width:40px;height:40px;border:3px solid transparent;border-top-color:#d600ff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:1200px){
.jd-ribbon-track .entryBlock{flex:0 0 calc(50% - 10px) !important;width:calc(50% - 10px) !important;max-width:calc(50% - 10px) !important}
}
@media(max-width:992px){
.st-hero-box{flex-direction:column;height:auto}
.st-hero-main{height:350px}
.st-hero-side{width:100%;flex-direction:row;height:100px;padding-right:0;overflow-x:auto}
.st-side-item{width:160px;height:100%}
.jd-tab-panel{flex-direction:column}
}
@media(max-width:768px){
.jd-ribbon-track .entryBlock{flex:0 0 85% !important;width:85% !important;max-width:85% !important}
}