/* ============================================================
   eventos-grid.css
   Grid de eventos (sustituye al carrusel) + filtros + secciones
   ============================================================ */

:root{
  --jd-purple:#7367f0;
  --jd-gold:#f5c842;
  --jd-cyan:#00d2ff;
  --jd-green:#51cf66;
  --jd-danger:#dc3545;
  --jd-bg:#140d23;
  --jd-bg-card:#1b1330;
  --jd-bg-soft:#221a3a;
  --jd-border:#332a4d;
  --jd-text:#e9e4f7;
  --jd-muted:#9d92bd;
}

/* ---------- Pestañas de categoría ---------- */
.jd-ev-cats-pills{
  display:flex;align-items:stretch;gap:10px;overflow-x:auto;
  padding-bottom:6px;margin-bottom:16px;scrollbar-width:none;
}
.jd-ev-cats-pills::-webkit-scrollbar{display:none;}
.jd-ev-cats-pills .catsTable{display:flex;gap:10px;flex:0 0 auto;}
.jd-ev-cats-pills .catsTd{
  flex:0 0 auto;background:var(--jd-bg-soft);border:1px solid var(--jd-border);
  border-radius:30px;padding:10px 20px;white-space:nowrap;transition:all .15s;
}
.jd-ev-cats-pills .catsTd:hover{border-color:var(--jd-purple);}
.jd-ev-cats-pills .catName{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.85rem;color:var(--jd-text);text-decoration:none;}
.jd-ev-cats-pills .catNumData{margin-left:6px;font-size:.72rem;color:var(--jd-gold);font-weight:700;}
.jd-ev-cats-pills .catDescr{display:none;}
.jd-ev-cats-more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px dashed var(--jd-border);border-radius:30px;padding:10px 18px;color:var(--jd-muted);
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;white-space:nowrap;
}
.jd-ev-cats-more:hover{color:var(--jd-gold);border-color:var(--jd-gold);}

.jd-ev-cats-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(8,5,16,.85);align-items:center;justify-content:center;padding:20px;}
.jd-ev-cats-modal__box{background:var(--jd-bg-card);border:1px solid var(--jd-border);border-radius:16px;max-width:540px;width:100%;max-height:80vh;overflow-y:auto;}
.jd-ev-cats-modal__head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--jd-border);font-family:'Cinzel',serif;font-size:.9rem;color:var(--jd-gold);}
.jd-ev-cats-modal__head i{color:var(--jd-purple);}
.jd-ev-cats-modal__close{margin-left:auto;background:none;border:none;color:var(--jd-muted);font-size:1.1rem;cursor:pointer;}
.jd-ev-cats-modal__list{padding:6px 16px 16px;}
.jd-ev-cats-modal__list .catsTable{display:flex;flex-direction:column;}
.jd-ev-cats-modal__list .catsTd{padding:14px 0;border-bottom:1px solid var(--jd-border);}
.jd-ev-cats-modal__list .catsTd:last-child{border-bottom:none;}
.jd-ev-cats-modal__list .catName{font-family:'Cinzel',serif;font-size:.92rem;color:var(--jd-text);text-decoration:none;display:block;margin-bottom:4px;}
.jd-ev-cats-modal__list .catNumData{color:var(--jd-gold);font-size:.78rem;margin-left:6px;}
.jd-ev-cats-modal__list .catDescr{font-family:'Rajdhani',sans-serif;font-size:.82rem;color:var(--jd-muted);line-height:1.5;}

/* ---------- Barra de filtros ---------- */
.jd-ev-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.jd-ev-filter-btn{
  background:var(--jd-bg-soft);border:1px solid var(--jd-border);color:var(--jd-muted);
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.8rem;
  padding:7px 16px;border-radius:20px;cursor:pointer;transition:all .15s;
}
.jd-ev-filter-btn:hover{border-color:var(--jd-purple);color:var(--jd-text);}
.jd-ev-filter-btn.active{background:var(--jd-purple);border-color:var(--jd-purple);color:#fff;}

/* ---------- Layout: rail + grid ---------- */
#jd-ev-layout{display:flex !important;gap:20px;align-items:flex-start;}
#jd-ev-wrap{flex:1 1 0% !important;min-width:0 !important;width:100%;}
#jd-ev-sidebar{flex:0 0 auto !important;}
@media (max-width:860px){
  /* En móvil abandonamos flex por completo: bloques normales, que SIEMPRE
     ocupan el 100% del ancho sin depender de cómo se reparta el espacio
     entre hermanos flex (que es justo lo que se estaba rompiendo). */
  #jd-ev-layout{display:block !important;}
  #jd-ev-sidebar{width:100%;margin-bottom:16px;}
  #jd-ev-wrap{width:100% !important;}
}

/* ---------- Grid de tarjetas ----------
   El display:grid va directo sobre #allEntries (el wrapper que mete uCoz
   alrededor de TODO el bucle $BODY$), no sobre #jd-ev-grid. Así cada
   tarjeta (dentro de su propio wrapper #entryID{n}) se convierte en un
   item de grid automáticamente, sin tener que mover nada por JS. */
#jd-ev-grid #allEntries{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:16px !important;
}
#jd-ev-grid #allEntries > div{ min-width:0; width:auto !important; }

.jd-ev-empty-filter{
  text-align:center;color:var(--jd-muted);font-family:'Rajdhani',sans-serif;
  padding:40px 0;display:none;
}

/* ---------- Tarjeta (igual que antes) ---------- */
.jd-ev-card{
  position:relative;height:100%;border-radius:18px;overflow:hidden;
  background:var(--jd-bg-card);border:1px solid var(--jd-border);
  display:flex;flex-direction:column;
}
.jd-ev-card__media{position:relative;display:block;height:170px;overflow:hidden;}
.jd-ev-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.jd-ev-card__media--placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--jd-bg-soft);color:var(--jd-muted);}
.jd-ev-card__media--placeholder svg{width:48px;height:48px;}
.jd-ev-card__gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,rgba(12,7,22,.92));}
.jd-ev-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.jd-ev-card__kicker{align-self:flex-start;font-family:'Rajdhani',sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--jd-gold);background:rgba(245,200,66,.14);padding:3px 10px;border-radius:20px;}
.jd-ev-card__title{font-family:'Cinzel',serif;font-weight:800;font-size:1.05rem;line-height:1.25;color:var(--jd-text);text-decoration:none;}
.jd-ev-card__title:hover{color:var(--jd-gold);}
.jd-ev-card__meta{display:flex;flex-wrap:wrap;gap:10px;}
.jd-ev-card__meta-item{display:inline-flex;align-items:center;gap:5px;font-family:'Rajdhani',sans-serif;font-size:.76rem;color:var(--jd-muted);}
.jd-ev-card__meta-item i{color:var(--jd-cyan);}
.jd-ev-card__meta-item--expired{color:#ff8a8a;}
.jd-ev-card__meta-item--expired i{color:var(--jd-danger);}
.jd-ev-card__rewards{display:flex;flex-wrap:wrap;gap:6px;}
.jd-ev-card__reward{display:inline-flex;align-items:center;gap:5px;background:rgba(81,207,102,.12);color:#7ee08a;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.76rem;padding:4px 10px;border-radius:20px;}
.jd-ev-card__reward i{color:var(--jd-gold);}
.jd-ev-card__actions{display:flex;gap:8px;margin-top:auto;padding-top:6px;}
.jd-ev-card__btn-main{flex:1;justify-content:center;}
.jd-ev-card__btn-sec{flex:0 0 auto;}
.jd-ev-card__players{margin-top:2px;}

/* Tarjetas llenas / caducadas: visualmente apagadas pero visibles */
.jd-ev-entry.ev-row-full .jd-ev-card{opacity:.55;filter:grayscale(.3);}
.jd-ev-entry.ev-row-expired .jd-ev-card{opacity:.4;filter:grayscale(.5);}

@media (max-width:700px){
  #jd-ev-grid #allEntries{grid-template-columns:1fr !important;}
}

/* ---------- Secciones inferiores: Tus eventos / Actividad ---------- */
.jd-card{background:var(--jd-bg-card);border:1px solid var(--jd-border);border-radius:16px;overflow:hidden;margin-top:20px;}
.jd-card-header{padding:16px 20px 0;}
.jd-card-body{padding:14px 20px 20px;}
.jd-ev-section-title{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:'Cinzel',serif;font-size:.92rem;font-weight:700;color:var(--jd-text);
}
.jd-ev-section-title i{color:var(--jd-purple);}

.jd-ev-yours{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.jd-ev-yours::-webkit-scrollbar{display:none;}
.jd-ev-yours-item{
  flex:0 0 160px;display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:var(--jd-bg-soft);border:1px solid var(--jd-border);border-radius:12px;
  padding:8px;transition:border-color .15s;
}
.jd-ev-yours-item:hover{border-color:var(--jd-purple);}
.jd-ev-yours-item img{width:100%;height:80px;object-fit:cover;border-radius:8px;display:block;}
.jd-ev-yours-item span{font-family:'Rajdhani',sans-serif;font-size:.78rem;font-weight:700;color:var(--jd-text);}
.jd-ev-yours-empty{color:var(--jd-muted);font-family:'Rajdhani',sans-serif;font-size:.85rem;margin:0;}

.jd-ev-activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.jd-ev-activity-stat{text-align:center;background:var(--jd-bg-soft);border:1px solid var(--jd-border);border-radius:12px;padding:16px 10px;}
.jd-ev-activity-stat__val{display:block;font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:700;color:var(--jd-gold);margin-bottom:4px;}
.jd-ev-activity-stat__lbl{font-family:'Rajdhani',sans-serif;font-size:.72rem;color:var(--jd-muted);text-transform:uppercase;letter-spacing:.04em;}
@media (max-width:600px){
  .jd-ev-activity-grid{grid-template-columns:1fr;}
}