/* ═══════════════════════════════════════════════════════════════
   catalogo-ao.css
   my.css ya define: .jd-body-wrap{margin-right:280px}
                     .jd-sidebar{position:fixed;right:0;width:280px}
                     .tpl-content{padding:18px 20px}
   Este archivo define SOLO componentes propios del catálogo.
   ═══════════════════════════════════════════════════════════════ */

/* ── TICKER ─────────────────────────────────────────── */
.cat-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  border-left: 3px solid var(--ao-hp);
  padding: 5px 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.cat-ticker__label {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  color: var(--ao-hp);
  letter-spacing: .12em;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
}
.cat-ticker__dot {
  width: 6px; height: 6px;
  background: var(--ao-hp);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--ao-hp);
  animation: tickerBlink 1s infinite;
}
@keyframes tickerBlink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.cat-ticker__track { flex: 1; overflow: hidden; }
.cat-ticker__content {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  color: var(--ao-muted);
  white-space: nowrap;
  animation: tickerScroll 40s linear infinite;
}
@keyframes tickerScroll { 0%{transform:translateX(100%);} 100%{transform:translateX(-100%);} }

/* ── CABECERA CATÁLOGO ──────────────────────────────── */
.cat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cat-header__title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ao-text);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cat-header__sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  color: var(--ao-muted);
  margin: 0;
}

/* ── HERO HOMEPAGE ──────────────────────────────────── */
.cat-hero-home {
  position: relative;
  min-height: 220px;
  background: linear-gradient(135deg, var(--ao-bg3) 0%, var(--ao-bg4) 100%);
  border: 1px solid var(--ao-border);
  border-left: 3px solid var(--ao-gold);
  margin-bottom: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.cat-hero-home__runes {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--ao-tile);
  opacity: .4;
}
.cat-hero-home__content {
  position: relative; z-index: 1;
  padding: 28px 24px;
}
.cat-hero-home__eyebrow {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .18em;
  color: var(--ao-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cat-hero-home__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--ao-text);
  margin: 0 0 10px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.cat-hero-home__title span {
  color: var(--ao-gold);
  font-weight: 900;
}
.cat-hero-home__sub {
  font-family: 'Rajdhani', sans-serif;
  color: var(--ao-muted);
  margin: 0 0 18px;
  font-size: .9rem;
}
.cat-hero-home__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cat-hero-home__btn-primary {
  background: var(--ao-gold) !important;
  color: #0a0805 !important;
  border-color: var(--ao-gold) !important;
  font-weight: 700;
}
.cat-hero-home__btn-outline {
  background: transparent !important;
  border-color: var(--ao-border) !important;
  color: var(--ao-text) !important;
}

/* ── STATS ROW ──────────────────────────────────────── */
.cat-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.cat-stats-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cat-stats-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .cat-stats-row { grid-template-columns: 1fr 1fr; } }

.cat-stat-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  border-top: 2px solid var(--accent, var(--ao-border));
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  transition: border-top-color .2s;
}
.cat-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  pointer-events: none;
}
.cat-stat-card__icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
  line-height: 1;
}
.cat-stat-card__label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  color: var(--ao-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cat-stat-card__val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  color: var(--ao-text);
  font-weight: 700;
  line-height: 1.2;
}
.cat-stat-card__hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: .72rem;
  color: var(--ao-muted);
  margin-top: 2px;
}

/* ── HOMEPAGE GRID (top semanal + sidebar home) ─────── */
.cat-home-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  margin-bottom: 14px;
  align-items: start;
}
@media (max-width: 800px) { .cat-home-grid { grid-template-columns: 1fr; } }

/* ── PANELS ─────────────────────────────────────────── */
.cat-panel {
  background: var(--ao-bg);
  border: 1px solid var(--ao-border2);
}
.cat-panel__head {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ao-border2);
  background: var(--ao-bg3);
}
.cat-panel__title {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  color: var(--ao-gold);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-panel__body { padding: 10px 12px; }

/* Top semanal — tabla AO */
.cat-top-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.cat-top-table th {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  color: var(--ao-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ao-border2);
  text-align: left;
  background: var(--ao-bg3);
}
.cat-top-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ao-border3);
  color: var(--ao-text);
  font-family: 'Rajdhani', sans-serif;
}
.cat-top-table tr:hover td { background: var(--ao-bg3); }
.cat-top-rank {
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  color: var(--ao-gold);
  font-weight: 700;
  width: 28px;
}
.cat-top-rank.gold   { color: #ffd700; }
.cat-top-rank.silver { color: #c0c0c0; }
.cat-top-rank.bronze { color: #cd7f32; }
.cat-top-name { font-family: 'Rajdhani', sans-serif; font-size: .88rem; color: var(--ao-text); text-decoration: none; }
.cat-top-name:hover { color: var(--ao-gold); }
.cat-top-bar-wrap { width: 80px; }
.cat-top-bar-track { height: 5px; background: var(--ao-bg4); border: 1px solid var(--ao-border3); }
.cat-top-bar-fill  { height: 100%; background: var(--ao-gold); }

/* ── HOME SIDEBAR WIDGETS ────────────────────────────── */
.cat-home-side { display: flex; flex-direction: column; gap: 10px; }
.cat-widget {
  background: var(--ao-bg);
  border: 1px solid var(--ao-border2);
}
.cat-widget__head {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  color: var(--ao-gold);
  letter-spacing: .08em;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ao-border2);
  background: var(--ao-bg3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-widget__head-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.cat-widget__head-title {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  color: var(--ao-text);
  letter-spacing: .06em;
}
.cat-widget__body { padding: 8px 10px; font-family: 'Rajdhani', sans-serif; font-size: .84rem; }

/* ── SERVIDOR DESTACADO ─────────────────────────────── */
.cat-featured {
  position: relative;
  min-height: 200px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid var(--ao-border);
  border-left: 3px solid var(--ao-gold);
  margin-bottom: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color .2s;
}
.cat-featured:hover { border-color: var(--ao-gold); }
.cat-featured__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  z-index: 1;
}
.cat-featured__bg {
  position: absolute; right: 0; top: 0;
  height: 100%; width: 50%;
  object-fit: cover; object-position: center;
  opacity: .55;
  z-index: 0;
}
.cat-featured__body {
  position: relative; z-index: 2;
  padding: 24px 22px;
  max-width: 60%;
}
.cat-featured__seal {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .1em;
  background: var(--ao-gold);
  color: #0a0805;
  padding: 2px 8px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.cat-featured__title {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  line-height: 1.2;
}
.cat-featured__desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: .88rem;
  color: rgba(255,255,255,.65);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cat-featured__badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(245,200,66,.14);
  color: var(--ao-gold);
  border: 1px solid rgba(245,200,66,.3);
  text-transform: uppercase;
}
.cat-badge--xp    { background: rgba(115,103,240,.2); color: #7367f0; border-color: rgba(115,103,240,.35); }
.cat-badge--green { background: rgba(39,174,96,.15); color: #27ae60; border-color: rgba(39,174,96,.3); }

/* ── SECTION TITLE ───────────────────────────────────── */
.cat-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cat-section-title__icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  font-size: 1rem;
  flex-shrink: 0;
}
.cat-section-title__text {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ao-text);
  display: block;
}
.cat-section-title__sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  color: var(--ao-muted);
  display: block;
}

/* ── ACCESOS RÁPIDOS ──────────────────────────────────── */
.cat-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 760px) { .cat-quick-grid { grid-template-columns: 1fr; } }

.cat-quick-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  transition: border-color .2s, transform .15s;
  position: relative;
}
.cat-quick-card:hover { border-color: var(--ao-gold); transform: translateY(-2px); }
.cat-quick-card__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.cat-quick-card__title {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  color: var(--ao-text);
  margin: 0;
}
.cat-quick-card__desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: .8rem;
  color: var(--ao-muted);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.cat-quick-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* Cofre */
.cat-quick-card--cofre {
  background: linear-gradient(135deg, rgba(201,168,76,.08), var(--ao-bg3));
  border-color: rgba(201,168,76,.3);
  justify-content: space-between;
  text-align: center;
  gap: 6px;
}
.cat-quick-card--cofre:hover { border-color: var(--ao-gold); }
.cat-quick-card__cofre-top { text-align: center; }
.cat-quick-card__cofre-img { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.cat-quick-card__cofre-bot {
  border-top: 1px solid rgba(201,168,76,.2);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── STEAM TABS ──────────────────────────────────────── */
.cat-steam-section { margin-bottom: 18px; }
.cat-hl-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  overflow: hidden;
}
.cat-hl-tab-arrow {
  width: 28px; height: 36px;
  flex-shrink: 0;
  background: var(--ao-bg4);
  border: none;
  border-right: 1px solid var(--ao-border2);
  color: var(--ao-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  transition: color .15s;
}
.cat-hl-tab-arrow.hidden { display: none; }
.cat-hl-tab-arrow:hover { color: var(--ao-gold); }
.cat-hl-tabs {
  display: flex;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
.cat-hl-tabs::-webkit-scrollbar { display: none; }
.cat-hl-tab {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--ao-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
  transition: color .12s, border-color .12s, background .12s;
  flex-shrink: 0;
}
.cat-hl-tab:hover { color: var(--ao-gold2); background: var(--ao-bg4); }
.cat-hl-tab.active { color: var(--ao-gold); border-bottom-color: var(--ao-gold); background: var(--ao-bg4); }

/* Body de highlights */
.cat-hl-body {
  min-height: 130px;
  display: flex;
  align-items: center;
}
.cat-loading {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  color: var(--ao-muted);
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 16px 0;
}

/* Grid tarjetas highlight (generado por catalogo-ao.js) */
.cat-hl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
}
@media (max-width: 1000px) { .cat-hl-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 760px)  { .cat-hl-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px)  { .cat-hl-grid { grid-template-columns: repeat(2,1fr); } }

.cat-hl-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.cat-hl-card:hover { border-color: var(--ao-gold); transform: translateY(-2px); z-index: 5; }
.cat-hl-card--featured { grid-column: span 2; border-color: rgba(245,200,66,.3); }
.cat-hl-card--featured .cat-hl-card__img { height: 120px; }
.cat-hl-card__img {
  width: 100%; height: 80px;
  object-fit: cover; display: block;
  background: var(--ao-bg4);
  flex-shrink: 0;
}
.cat-hl-card__body { padding: 6px 8px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cat-hl-card__name {
  font-family: 'Cinzel', serif; font-size: .7rem;
  color: var(--ao-text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-hl-card:hover .cat-hl-card__name { color: var(--ao-gold); }
.cat-hl-card__meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cat-hl-card__stat {
  font-family: 'Rajdhani', sans-serif; font-size: .62rem;
  color: var(--ao-muted); display: flex; align-items: center; gap: 2px;
}
.cat-hl-card__badge {
  position: absolute; top: 0; left: 0;
  background: var(--ao-hp); color: #fff;
  font-family: 'Cinzel', serif; font-size: .52rem;
  letter-spacing: .06em; padding: 2px 5px; text-transform: uppercase;
}
.cat-hl-card__rating { font-family: 'Orbitron', sans-serif; font-size: .55rem; color: var(--ao-gold); }

/* ── RANKINGS ────────────────────────────────────────── */
.cat-rankings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .cat-rankings-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 580px) { .cat-rankings-grid { grid-template-columns: repeat(2,1fr); } }

.cat-rank-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 140px;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.cat-rank-card:hover { border-color: var(--ao-gold); transform: translateY(-2px); }
.cat-rank-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 4px;
}
.cat-rank-card__title { font-family: 'Cinzel', serif; font-size: .76rem; color: var(--ao-text); }
.cat-rank-card small { font-family: 'Rajdhani', sans-serif; font-size: .72rem; color: var(--ao-muted); }

/* ── LAYOUT CATÁLOGO (buscador+filtros+body | sidebar) ─ */
.cat-catalog-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .cat-catalog-layout { grid-template-columns: 1fr; } }

.cat-catalog-main { display: flex; flex-direction: column; gap: 10px; }
.cat-catalog-side { display: flex; flex-direction: column; gap: 10px; }

/* ── BUSCADOR ────────────────────────────────────────── */
.cat-search-panel {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  border-top: 2px solid #7367f0;
}
.cat-search-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ao-border2);
}
.cat-search-panel__icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg,#7367f0,#5e50ee);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.cat-search-panel__title {
  font-family: 'Cinzel', serif;
  font-size: .85rem; color: var(--ao-text); margin: 0 0 2px;
}
.cat-search-panel__sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .75rem; color: var(--ao-muted); margin: 0;
}
.cat-search-panel__form { padding: 12px 14px; }
.cat-search-panel__input-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
}
.cat-search-panel__input-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ao-muted);
  font-size: .95rem;
  pointer-events: none;
  z-index: 2;
}
.cat-search-panel__input {
  flex: 1;
  background: var(--ao-bg);
  border: 1px solid var(--ao-border2);
  border-right: none;
  color: var(--ao-text);
  padding: 10px 12px 10px 36px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s;
}
.cat-search-panel__input:focus { border-color: #7367f0; }
.cat-search-panel__btn {
  background: linear-gradient(135deg,#7367f0,#5e50ee);
  border: none;
  color: #fff;
  padding: 10px 16px;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  transition: opacity .15s;
}
.cat-search-panel__btn:hover { opacity: .85; }

/* ── FILTROS ─────────────────────────────────────────── */
.cat-filters-panel {
  background: var(--ao-bg);
  border: 1px solid var(--ao-border2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cat-filters-row select.select_filter,
.tpl-content .cat-filters-row select.select_filter {
  width: auto !important;
  max-width: 220px;
  flex: 0 1 auto;
}
.cat-filters-row select:hover,
.cat-filters-row .select_filter:hover { border-color: var(--ao-gold); }
.cat-filters-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--ao-border3);
  padding-top: 8px;
}
.cat-count { font-family: 'Rajdhani', sans-serif; color: var(--ao-muted); font-size: .8rem; }
.cat-count strong { color: var(--ao-gold2); }
.cat-sort { display: flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-size: .8rem; color: var(--ao-muted); }
.cat-sort__label { white-space: nowrap; }
.cat-sort select { background: var(--ao-bg3); color: var(--ao-text); border: 1px solid var(--ao-border2); padding: 4px 7px; font-size: .8rem; outline: none; }
.cat-dice-btn {
  width: 32px; height: 32px;
  background: var(--ao-bg3); border: 1px solid var(--ao-border2);
  color: var(--ao-gold); cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color .12s, transform .2s;
}
.cat-dice-btn:hover { border-color: var(--ao-gold); transform: rotate(30deg) scale(1.1); }

/* ── GRID ENTRADAS ($BODY$) ─────────────────────────── */
.cat-entries {}
#allEntries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0; padding: 0;
}
#allEntries > div { width: 100%; min-width: 0; box-sizing: border-box; }
#allEntries:hover > div:not(:hover) { opacity: .45; filter: brightness(.55) grayscale(60%); transition: all .3s; }
@media (max-width: 900px) { #allEntries { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { #allEntries { grid-template-columns: 1fr; } }

/* ── TARJETA NORMAL ──────────────────────────────────── */
.ao-card-poster {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  position: relative; overflow: hidden;
  height: 100%; min-height: 320px;
  display: flex; flex-direction: column; box-sizing: border-box;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ao-card-poster::before { content: ''; display: block; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, transparent, var(--ao-gold), transparent); }
.ao-card-poster:hover { border-color: var(--ao-gold); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.5); overflow: visible; z-index: 10; }

/* ── TARJETA PREMIUM ─────────────────────────────────── */
.ao-card-premium {
  background: var(--ao-bg3);
  border: 2px solid var(--ao-gold);
  box-shadow: 0 0 10px rgba(245,200,66,.12);
  position: relative; overflow: visible;
  height: 100%; min-height: 320px;
  display: flex; flex-direction: column; box-sizing: border-box;
  transform: scale(1.015); z-index: 5;
  animation: aoGoldPulse 4s ease-in-out infinite;
}
.ao-card-premium::after { content: '★ RECOMENDADO'; position: absolute; top: 10px; right: -6px; background: linear-gradient(90deg, var(--ao-gold), #ffe87c); color: #0a0805; font-family: 'Cinzel', serif; font-size: .56rem; font-weight: 900; padding: 3px 8px; letter-spacing: .06em; z-index: 20; box-shadow: -2px 2px 5px rgba(0,0,0,.5); }
.ao-card-premium::before { content: ''; position: absolute; top: 29px; right: -6px; border: 3px solid transparent; border-color: #8a6d0b transparent transparent #8a6d0b; z-index: 19; }
@keyframes aoGoldPulse { 0%,100%{box-shadow:0 0 10px rgba(245,200,66,.12);} 50%{box-shadow:0 0 18px rgba(245,200,66,.32);} }

/* ── IMAGEN POSTER ───────────────────────────────────── */
.ao-poster-img-container { height: 150px; position: relative; overflow: hidden; background: var(--ao-bg4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ao-poster-img-container::before { content: ''; position: absolute; inset: 0; background-image: var(--bg-logo); background-size: cover; background-position: center; filter: blur(16px) opacity(.15); z-index: 1; }
.ao-poster-img { width: 100%; height: 100%; object-fit: contain; z-index: 2; position: relative; transition: transform .5s; }
.ao-card-poster:hover .ao-poster-img, .ao-card-premium:hover .ao-poster-img { transform: scale(1.07); }
.ao-gradient-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 55%; background: linear-gradient(to bottom, transparent, var(--ao-bg3)); pointer-events: none; z-index: 3; }
.ao-ribbon { position: absolute; top: 9px; left: 0; padding: 3px 9px 3px 7px; background: linear-gradient(90deg, #8b1a1a, var(--ao-hp)); color: #fff; font-family: 'Cinzel', serif; font-size: .55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; z-index: 20; clip-path: polygon(0 0,100% 0,88% 50%,100% 100%,0 100%); }
.play-overlay-btn { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) scale(0); opacity: 0; width: 40px; height: 40px; background: rgba(245,200,66,.85); border: 1px solid var(--ao-gold); display: flex; align-items: center; justify-content: center; color: #0a0805; font-size: 1.2rem; z-index: 20; text-decoration: none; transition: all .25s ease; }
.ao-card-poster:hover .play-overlay-btn, .ao-card-premium:hover .play-overlay-btn { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ── VALORACIÓN ──────────────────────────────────────── */
.gem-section { padding: 4px 10px; background: rgba(245,200,66,.04); border-top: 1px solid var(--ao-border3); border-bottom: 1px solid var(--ao-border3); text-align: center; flex-shrink: 0; }
.gem-vessel { display: flex; align-items: center; justify-content: center; height: 24px; }

/* ── BODY TARJETA ─────────────────────────────────────── */
.ao-card-body { padding: 8px 10px; display: flex; flex-direction: column; flex: 1; gap: 5px; }
.ao-title { font-family: 'Cinzel', serif; font-size: .84rem; font-weight: 700; color: var(--ao-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.ao-card-premium .ao-title { color: var(--ao-gold); }
.ao-card-poster:hover .ao-title { color: var(--ao-gold2); }
.ao-card-desc { font-family: 'Rajdhani', sans-serif; font-size: .76rem; color: var(--ao-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── SERVER BADGE ────────────────────────────────────── */
.server-badge-giant { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(245,200,66,.05); border-top: 1px solid var(--ao-border3); border-bottom: 1px solid var(--ao-border3); border-left: 2px solid var(--ao-gold); text-decoration: none; transition: background .15s, padding-left .15s; margin: 0 -10px 5px; }
.server-badge-giant:hover { background: rgba(245,200,66,.1); padding-left: 14px; }
.server-flag-icon { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ao-border2); object-fit: cover; }

/* ── BIOHAZARD ───────────────────────────────────────── */
.biohazard-entry { pointer-events: none; user-select: none; position: relative; }
.biohazard-entry .ao-card-poster { border: 2px solid var(--ao-hp); box-shadow: 0 0 14px rgba(192,57,43,.25); }
.biohazard-entry .ao-poster-img-container { filter: sepia(80%) hue-rotate(-50deg) saturate(220%); opacity: .7; }
.biohazard-entry .ao-card-poster::after { content: '☣ INFECTADO'; position: absolute; top: 32%; left: 50%; transform: translate(-50%,-50%) rotate(-12deg); font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 900; color: var(--ao-hp); border: 2px solid var(--ao-hp); padding: 6px 10px; background: rgba(0,0,0,.88); z-index: 50; letter-spacing: .08em; animation: bioPulse 2s infinite; white-space: nowrap; }
@keyframes bioPulse { 0%,100%{opacity:.8;transform:translate(-50%,-50%) rotate(-12deg) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1.04);} }
.biohazard-entry .server-badge-giant, .biohazard-entry .moder-panel-fix { pointer-events: auto; }
.yellowhazard-entry .ao-card-poster { border-color: var(--ao-gold); }

/* ── VT BADGE ────────────────────────────────────────── */
.vt-trigger-btn { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; background: var(--ao-bg4); border: 1px solid var(--ao-border2); cursor: pointer; font-family: 'Orbitron', sans-serif; font-size: .52rem; color: #00d2ff; transition: border-color .12s; }
.vt-trigger-btn:hover { border-color: #00d2ff; }
.orbe-vt-class { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }

/* ── DROPDOWN ────────────────────────────────────────── */
.ao-card-dropdown { position: relative; }
.ao-card-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background: var(--ao-bg); border: 1px solid var(--ao-border); min-width: 175px; z-index: 1000; box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.ao-card-dropdown.open .ao-card-dropdown-menu { display: block; }
.ao-card-dropdown-menu a, .ao-card-dropdown-menu button { display: block; width: 100%; padding: 7px 10px; color: var(--ao-text); text-decoration: none; font-family: 'Rajdhani', sans-serif; font-size: .82rem; background: none; border: none; text-align: left; cursor: pointer; transition: background .1s; }
.ao-card-dropdown-menu a:hover, .ao-card-dropdown-menu button:hover { background: var(--ao-bg3); color: var(--ao-gold); }
.ao-dropdown-divider { border: none; border-top: 1px solid var(--ao-border2); margin: 2px 0; }
.ao-dropdown-toggle { background: none; border: none; color: var(--ao-muted); cursor: pointer; padding: 3px 5px; font-size: .9rem; flex-shrink: 0; transition: color .12s; }
.ao-dropdown-toggle:hover { color: var(--ao-text); }

/* ── FANDOM FLIP ─────────────────────────────────────── */
.jd-flip { perspective: 500px; min-height: 28px; }
.jd-flip__inner { position: relative; transform-style: preserve-3d; transition: transform .4s; }
.jd-flip.flipped .jd-flip__inner { transform: rotateX(180deg); }
.jd-flip__front, .jd-flip__back { backface-visibility: hidden; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.jd-flip__back { position: absolute; inset: 0; transform: rotateX(180deg); }
.jd-flip__hint { font-size: .55rem; color: var(--ao-faint); font-family: 'Orbitron', sans-serif; }

/* ── SHARE BAR ───────────────────────────────────────── */
.jd-share-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.jd-share-label { font-family: 'Rajdhani', sans-serif; font-size: .72rem; color: var(--ao-muted); }
.jd-share-btn { width: 26px; height: 26px; background: var(--ao-bg3); border: 1px solid var(--ao-border2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ao-text); text-decoration: none; transition: border-color .12s, color .12s; }
.jd-share-btn svg { width: 12px; height: 12px; fill: currentColor; }
.jd-share-btn:hover { border-color: var(--ao-gold); color: var(--ao-gold); }
.jd-share-btn.copied { border-color: var(--ao-xp); color: var(--ao-xp); }

/* ── PAGINACIÓN ──────────────────────────────────────── */
.cat-pagination-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-top: 1px solid var(--ao-border2); margin-top: 10px; font-family: 'Rajdhani', sans-serif; color: var(--ao-muted); font-size: .8rem; }
.cat-pagination { display: flex; gap: 3px; flex-wrap: wrap; }
.cat-page-btn { background: var(--ao-bg3); border: 1px solid var(--ao-border2); color: var(--ao-text); padding: 4px 9px; font-family: 'Cinzel', serif; font-size: .68rem; cursor: pointer; transition: all .12s; }
.cat-page-btn:hover:not(:disabled) { background: var(--ao-bg4); border-color: var(--ao-gold); color: var(--ao-gold); }
.cat-page-btn.active { background: var(--ao-gold); color: #0a0805; border-color: var(--ao-gold); cursor: default; }
.cat-page-btn:disabled { opacity: .4; cursor: default; }

/* ── SIDEBAR DEL CATÁLOGO ────────────────────────────── */
.cat-widget--orbe { border-color: rgba(245,200,66,.25); }
.cat-widget--dragon {}

/* ── ACTIVIDADES ─────────────────────────────────────── */
.cat-activities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .cat-activities-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .cat-activities-grid { grid-template-columns: repeat(2,1fr); } }

.cat-act-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 160px;
  transition: border-color .15s, transform .15s;
}
.cat-act-card:hover { border-color: var(--ao-gold); transform: translateY(-2px); }
.cat-act-card--locked { opacity: .55; cursor: not-allowed; }
.cat-act-card--locked:hover { transform: none; border-color: var(--ao-border2); }
.cat-act-card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 4px; flex-shrink: 0; }
.cat-act-card__title { font-family: 'Cinzel', serif; font-size: .72rem; color: var(--ao-text); display: block; }
.cat-act-card__sub { font-family: 'Rajdhani', sans-serif; font-size: .7rem; color: var(--ao-muted); display: block; }

/* ── REFERRAL ────────────────────────────────────────── */
.cat-referral {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  border-top: 2px solid var(--ao-gold);
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 14px;
}
.cat-referral__title { font-family: 'Cinzel', serif; font-size: .95rem; color: var(--ao-gold); margin: 0 0 7px; }
.cat-referral__desc { font-family: 'Rajdhani', sans-serif; font-size: .84rem; color: var(--ao-text); margin: 0 0 14px; }
.cat-referral__desc strong { color: var(--ao-gold); }
.cat-referral__input-row { display: flex; gap: 8px; max-width: 500px; margin: 0 auto; }
.cat-referral__input { flex: 1; background: var(--ao-bg); border: 1px solid var(--ao-border2); color: var(--ao-text); padding: 8px 10px; font-family: 'Rajdhani', sans-serif; font-size: .84rem; outline: none; }

/* ── INFO CARDS ──────────────────────────────────────── */
.cat-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .cat-info-cards { grid-template-columns: 1fr; } }
.cat-info-card {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  border-left: 3px solid var(--ao-border);
  padding: 14px 12px;
}
.cat-info-card__title { font-family: 'Cinzel', serif; font-size: .78rem; color: var(--ao-text); margin: 0 0 6px; display: flex; align-items: center; gap: 5px; }
.cat-info-card__body { font-family: 'Rajdhani', sans-serif; font-size: .8rem; color: var(--ao-muted); margin: 0; line-height: 1.5; }

/* ── EXPLORAR CATEGORÍAS (modal) ─────────────────────── */
.cat-explorer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.cat-explorer-item {
  background: var(--ao-bg3);
  border: 1px solid var(--ao-border2);
  padding: 10px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .86rem;
  color: var(--ao-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .12s, color .12s, background .12s;
}
.cat-explorer-item:hover { border-color: var(--ao-gold); color: var(--ao-gold); background: var(--ao-bg4); }

/* ── SPINNERS ────────────────────────────────────────── */
.ao-spinner { width: 30px; height: 30px; border: 2px dashed var(--ao-gold); border-radius: 50%; animation: aoSpin .9s linear infinite; margin: 0 auto; }
.ao-spinner-sm { width: 14px; height: 14px; border: 2px dashed var(--ao-gold); border-radius: 50%; animation: aoSpin .9s linear infinite; display: inline-block; }
@keyframes aoSpin { 100%{ transform: rotate(360deg); } }

/* ── GEM FLASH ───────────────────────────────────────── */
@keyframes gemFlash { 0%{filter:brightness(1)} 50%{filter:brightness(2.5) saturate(2)} 100%{filter:brightness(1)} }
.gem-flash-active { animation: gemFlash .4s ease; }

/* ── VT MODAL ────────────────────────────────────────── */
@keyframes vtSpin { 100%{ transform: rotate(360deg); } }
.vt-dynamic-icon[class*="ri-loader"] { animation: vtSpin .8s linear infinite; }

/* ── RESPONSIVE GENERAL ──────────────────────────────── */
@media (max-width: 900px) {
  .cat-featured { min-height: 160px; }
  .cat-featured__bg { width: 40%; opacity: .4; }
  .cat-featured__body { max-width: 70%; }
  .cat-featured__title { font-size: 1.1rem; }
}
@media (max-width: 640px) {
  .cat-featured__body { max-width: 100%; }
  .cat-featured__bg { display: none; }
  .cat-hero-home { min-height: 160px; }
  .ao-poster-img-container { height: 130px; }
  .ao-card-premium { transform: none; }
}