/* ════════════════════════════════════════════════════════════
   CRÓNICA DEL SERVIDOR - Sistema de XP mensual progresivo
   ════════════════════════════════════════════════════════════ */

.cs-modal-overlay{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px;animation:csFadeIn .4s ease}
.cs-modal-overlay.show{display:flex}
@keyframes csFadeIn{from{opacity:0}to{opacity:1}}

.cs-modal{position:relative;width:100%;max-width:920px;max-height:92vh;background:linear-gradient(135deg,#1a0d2e 0%,#0f0a1f 50%,#1a0d2e 100%);border:1px solid rgba(245,200,66,.4);border-radius:24px;box-shadow:0 0 80px rgba(115,103,240,.4),0 30px 80px rgba(0,0,0,.6),inset 0 0 100px rgba(115,103,240,.05);animation:csSlideUp .5s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;overflow:hidden}
@keyframes csSlideUp{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

#csModalBody{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(245,200,66,.4) transparent}
#csModalBody::-webkit-scrollbar{width:8px}
#csModalBody::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
#csModalBody::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f5c842,#7367f0);border-radius:10px}

.cs-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#7367f0,#f5c842,#00e5ff,#7367f0,transparent);background-size:200% 100%;animation:csShine 4s linear infinite;z-index:11}
@keyframes csShine{to{background-position:-200% 0}}

.cs-modal__close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(245,200,66,.4);color:#f5c842;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s}
.cs-modal__close:hover{background:rgba(245,200,66,.2);transform:rotate(90deg);border-color:#f5c842}

/* ── HEADER ─────────────────────────────────── */
.cs-header{position:relative;padding:32px 32px 24px;text-align:center;border-bottom:1px solid rgba(245,200,66,.15);overflow:hidden}
.cs-header::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(115,103,240,.15) 0%,transparent 60%);pointer-events:none}
.cs-header__eyebrow{font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:.4em;color:#f5c842;text-transform:uppercase;margin-bottom:8px;opacity:.85}
.cs-header__title{font-family:'Cinzel',serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;color:#fff;line-height:1.15;margin-bottom:6px;text-shadow:0 0 25px rgba(115,103,240,.5)}
.cs-header__title span{background:linear-gradient(90deg,#f5c842,#ffd87a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-header__sub{font-family:'IM Fell English',serif;font-style:italic;color:rgba(255,255,255,.6);font-size:.95rem}

/* ── STATS BAR ──────────────────────────────── */
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 32px;background:rgba(0,0,0,.25)}
@media(max-width:640px){.cs-stats{grid-template-columns:repeat(2,1fr);padding:16px}}

.cs-stat{text-align:center;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(245,200,66,.1)}
.cs-stat__icon{font-size:1.4rem;margin-bottom:4px}
.cs-stat__value{font-family:'Orbitron',monospace;font-size:1.5rem;font-weight:800;color:#fff;line-height:1}
.cs-stat__label{font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:.15em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:4px}

.cs-stat--xp .cs-stat__value{color:#7367f0}
.cs-stat--streak .cs-stat__value{color:#ff4c6a}
.cs-stat--days .cs-stat__value{color:#00e5ff}
.cs-stat--bonus .cs-stat__value{color:#f5c842}

/* ── CONQUEST OF THE DAY ────────────────────── */
.cs-conquest{margin:20px 32px;padding:18px 22px;border-radius:16px;background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(115,103,240,.08));border:1px solid rgba(245,200,66,.3);display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
.cs-conquest::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#f5c842,transparent)}
.cs-conquest__icon{flex-shrink:0;width:54px;height:54px;border-radius:14px;background:rgba(245,200,66,.18);display:flex;align-items:center;justify-content:center;font-size:1.8rem;border:1px solid rgba(245,200,66,.4)}
.cs-conquest__body{flex:1;min-width:0}
.cs-conquest__label{font-family:'Orbitron',monospace;font-size:.65rem;letter-spacing:.2em;color:#f5c842;text-transform:uppercase;margin-bottom:2px}
.cs-conquest__name{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:2px}
.cs-conquest__desc{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.4}
.cs-conquest__bonus{flex-shrink:0;padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,#f5c842,#ffb300);color:#000;font-family:'Orbitron',monospace;font-weight:800;font-size:.85rem;letter-spacing:.05em;box-shadow:0 4px 14px rgba(245,200,66,.4)}

/* ── CALENDAR ───────────────────────────────── */
.cs-cal-section{padding:24px 32px}
.cs-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.cs-cal-month{font-family:'Cinzel',serif;font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:.05em}
.cs-cal-month i{color:#7367f0;margin-right:8px}
.cs-cal-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.7rem;color:rgba(255,255,255,.6)}
.cs-cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cs-cal-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.cs-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cs-cal-dow{text-align:center;font-family:'Orbitron',monospace;font-size:.65rem;letter-spacing:.15em;color:rgba(255,255,255,.4);padding:8px 0;text-transform:uppercase}

.cs-cal-day{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Orbitron',monospace;font-weight:700;font-size:.95rem;position:relative;border:1px solid transparent;transition:all .25s;cursor:default;background:rgba(255,255,255,.02);color:rgba(255,255,255,.4)}
.cs-cal-day__num{font-size:.95rem;line-height:1}
.cs-cal-day__xp{font-size:.55rem;font-weight:600;letter-spacing:.05em;margin-top:2px;opacity:.85}

/* Estado: día vacío (mes anterior/siguiente) */
.cs-cal-day--empty{visibility:hidden}

/* Estado: futuro - bloqueado */
.cs-cal-day--future{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.06);color:rgba(255,255,255,.25)}
.cs-cal-day--future .cs-cal-day__xp{display:none}
.cs-cal-day--future::after{content:'\f3ed';font-family:'remixicon';position:absolute;bottom:6px;right:6px;font-size:.5rem;opacity:.4}

/* Estado: pasado no visitado - perdido */
.cs-cal-day--lost{background:rgba(255,76,106,.05);border-color:rgba(255,76,106,.15);color:rgba(255,76,106,.5)}
.cs-cal-day--lost::before{content:'\eb98';font-family:'remixicon';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;color:rgba(255,76,106,.2);font-weight:400}
.cs-cal-day--lost .cs-cal-day__num,.cs-cal-day--lost .cs-cal-day__xp{position:relative;z-index:2}
.cs-cal-day--lost .cs-cal-day__xp{display:none}

/* Estado: pasado visitado - reclamado */
.cs-cal-day--claimed{background:linear-gradient(135deg,rgba(86,202,0,.18),rgba(86,202,0,.08));border-color:rgba(86,202,0,.4);color:#56ca00;box-shadow:0 0 12px rgba(86,202,0,.15) inset}
.cs-cal-day--claimed::after{content:'\eb7b';font-family:'remixicon';position:absolute;top:4px;right:4px;font-size:.7rem;color:#56ca00}

/* Estado: hoy - sin reclamar (PROTAGONISTA - clickable) */
.cs-cal-day--today-pending{background:linear-gradient(135deg,rgba(245,200,66,.25),rgba(245,200,66,.1));border-color:#f5c842;color:#f5c842;cursor:pointer;animation:csPulseGold 2s ease-in-out infinite;box-shadow:0 0 0 2px rgba(245,200,66,.2),0 0 20px rgba(245,200,66,.4)}
.cs-cal-day--today-pending:hover{transform:scale(1.12);box-shadow:0 0 0 3px rgba(245,200,66,.6),0 0 35px rgba(245,200,66,.8);background:linear-gradient(135deg,rgba(245,200,66,.4),rgba(245,200,66,.2))}
.cs-cal-day--today-pending:active{transform:scale(.95)}
.cs-cal-day--today-pending::before{content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#ff4c6a;box-shadow:0 0 10px #ff4c6a;animation:csBlink 1s infinite;z-index:3}
.cs-cal-day--today-pending::after{content:'CLICK';position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#ff4c6a;color:#fff;font-family:'Orbitron',monospace;font-size:.5rem;letter-spacing:.1em;padding:2px 6px;border-radius:4px;white-space:nowrap;font-weight:800;box-shadow:0 2px 8px rgba(255,76,106,.5);animation:csBounceLabel 1.5s ease-in-out infinite}
@keyframes csBounceLabel{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}

@keyframes csPulseGold{0%,100%{box-shadow:0 0 0 2px rgba(245,200,66,.2),0 0 20px rgba(245,200,66,.4)}50%{box-shadow:0 0 0 4px rgba(245,200,66,.35),0 0 35px rgba(245,200,66,.7)}}
@keyframes csBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* Estado: hoy - ya reclamado */
.cs-cal-day--today-claimed{background:linear-gradient(135deg,rgba(115,103,240,.25),rgba(115,103,240,.1));border-color:#7367f0;color:#fff;box-shadow:0 0 0 2px rgba(115,103,240,.3),0 0 20px rgba(115,103,240,.4)}
.cs-cal-day--today-claimed::after{content:'\eb7b';font-family:'remixicon';position:absolute;top:4px;right:4px;font-size:.75rem;color:#56ca00}

/* Día con bonus de racha (hito) */
.cs-cal-day--milestone{position:relative}
.cs-cal-day--milestone .cs-cal-milestone-mark{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,#f5c842,#ffd87a);box-shadow:0 0 8px #f5c842}

/* ── MILESTONES TIMELINE ────────────────────── */
.cs-milestones{padding:0 32px 24px}
.cs-milestones__title{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cs-milestones__title i{color:#f5c842}
.cs-milestones__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:640px){.cs-milestones__grid{grid-template-columns:repeat(2,1fr)}}

.cs-milestone{padding:14px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);text-align:center;position:relative;transition:all .3s}
.cs-milestone--reached{background:linear-gradient(135deg,rgba(245,200,66,.18),rgba(245,200,66,.06));border-color:rgba(245,200,66,.5);box-shadow:0 4px 16px rgba(245,200,66,.15)}
.cs-milestone--locked{opacity:.45}
.cs-milestone__icon{font-size:1.6rem;margin-bottom:4px}
.cs-milestone__days{font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:2px}
.cs-milestone__xp{font-family:'Cinzel',serif;font-weight:700;font-size:.95rem;color:#f5c842}
.cs-milestone--reached .cs-milestone__icon{filter:drop-shadow(0 0 8px #f5c842)}

/* ── CTA BUTTON ─────────────────────────────── */
.cs-cta-wrap{position:sticky;bottom:0;padding:18px 32px 24px;background:linear-gradient(180deg,transparent 0%,rgba(15,10,31,.92) 30%,rgba(15,10,31,.99) 100%);backdrop-filter:blur(10px);z-index:5;margin-top:8px}
.cs-cta{width:100%;padding:18px 24px;border:none;border-radius:14px;background:linear-gradient(135deg,#f5c842 0%,#ffb300 50%,#f5c842 100%);background-size:200% 100%;color:#1a0d2e;font-family:'Cinzel',serif;font-weight:900;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .3s;box-shadow:0 8px 30px rgba(245,200,66,.4),inset 0 1px 0 rgba(255,255,255,.4);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px}
.cs-cta:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 40px rgba(245,200,66,.6)}
.cs-cta:active{transform:translateY(0)}
.cs-cta:disabled{background:linear-gradient(135deg,#56ca00,#3d8f00);color:#fff;cursor:default;box-shadow:0 4px 14px rgba(86,202,0,.3)}
.cs-cta:disabled:hover{transform:none}
.cs-cta i{font-size:1.3rem}

/* ── CLAIM ANIMATION ────────────────────────── */
.cs-claim-fx{position:fixed;inset:0;pointer-events:none;z-index:99999;display:none}
.cs-claim-fx.active{display:block}
.cs-claim-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:#f5c842;box-shadow:0 0 10px #f5c842;animation:csParticle 1.5s ease-out forwards}
@keyframes csParticle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}

.cs-floating-xp{position:fixed;font-family:'Cinzel',serif;font-weight:900;font-size:2.5rem;color:#f5c842;text-shadow:0 0 20px #f5c842,0 4px 12px rgba(0,0,0,.8);pointer-events:none;z-index:99999;animation:csFloat 2s ease-out forwards}
@keyframes csFloat{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-30px) scale(1.2)}100%{opacity:0;transform:translateY(-150px) scale(1)}}

/* ════════════════════════════════════════════
   WIDGET HOMEPAGE - Crónicas Activas
   ════════════════════════════════════════════ */
.cs-home-widget{margin-bottom:20px}
.cs-home-widget .jd-widget__head{background:linear-gradient(90deg,rgba(245,200,66,.08),transparent)}

.cs-active-list{display:flex;flex-direction:column;gap:8px}
.cs-active-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(245,200,66,.12);text-decoration:none;color:inherit;transition:all .25s;position:relative;overflow:hidden}
.cs-active-item:hover{background:rgba(245,200,66,.06);border-color:rgba(245,200,66,.35);transform:translateX(3px)}

.cs-active-item__img{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid rgba(245,200,66,.3);flex-shrink:0;background:#000}
.cs-active-item__body{flex:1;min-width:0}
.cs-active-item__name{font-family:'Cinzel',serif;font-weight:700;font-size:.85rem;color:var(--bs-heading-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:2px}
.cs-active-item__streak{font-family:'Orbitron',monospace;font-size:.65rem;color:rgba(255,255,255,.5);letter-spacing:.05em}
.cs-active-item__streak i{color:#ff4c6a;margin-right:3px}

.cs-active-item__check{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.cs-active-item--claimed .cs-active-item__check{background:rgba(86,202,0,.18);color:#56ca00;border:1px solid rgba(86,202,0,.4)}
.cs-active-item--pending .cs-active-item__check{background:rgba(245,200,66,.18);color:#f5c842;border:1px solid rgba(245,200,66,.5);animation:csPulseGold 2s ease-in-out infinite}

.cs-home-empty{padding:24px 12px;text-align:center;font-family:'IM Fell English',serif;font-style:italic;color:rgba(255,255,255,.45);font-size:.85rem;line-height:1.5}
.cs-home-empty i{display:block;font-size:2rem;margin-bottom:8px;color:rgba(245,200,66,.3)}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:640px){
  .cs-header{padding:24px 18px 18px}
  .cs-stats{padding:14px 18px;gap:8px}
  .cs-stat__value{font-size:1.2rem}
  .cs-conquest{margin:14px 18px;padding:14px 16px;flex-wrap:wrap}
  .cs-conquest__icon{width:44px;height:44px;font-size:1.4rem}
  .cs-conquest__bonus{order:3;width:100%;text-align:center}
  .cs-cal-section{padding:18px}
  .cs-cal-day{font-size:.8rem}
  .cs-cal-day__xp{font-size:.5rem}
  .cs-milestones{padding:0 18px 18px}
  .cs-cta-wrap{padding:14px 18px 18px;margin-top:6px}
  .cs-cta{font-size:.9rem;padding:14px 18px}
}