/* ===================================================== */
/* ===================== STAT CARDS ==================== */
/* ===================================================== */

.dgx-stat-card {
  background: linear-gradient(145deg, #0f1424, #0b0f1c);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.25s ease;
  text-align:center;  
}

.dgx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.08);  
}


.dgx-stat-header {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8b93a7;
  margin-bottom: 10px;
}

.dgx-stat-value {
  font-size:32px;
  margin-top:10px;
  font-weight: 600;
}

.dgx-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7c859f;
  margin-bottom: 12px;
}

.dgx-stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
}

.dgx-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.dgx-status-dot.online {
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}

.dgx-status-dot.offline {
  background: #f43f5e;
  box-shadow: 0 0 10px #f43f5e;
}
.dgx-stat-card.vip {
  background: linear-gradient(145deg, #1a1303, #0f0b02);
  border: 1px solid rgba(255, 183, 0, 0.2);
}

.dgx-stat-card.vip .dgx-stat-number {
  color: #ffb700;
}

.dgx-center{
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* ===============================
   SERVER STATUS CARD
================================ */

.dgx-server-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgx-server-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;  
}

/* COLORES */

.dgx-server-dot.online {
  background: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}

.dgx-server-dot.offline {
  background: #ff4d4f;
  box-shadow: 0 0 10px rgba(255, 77, 79, 0.6);
}

.dgx-server-dot.partial {
  background: #ffb020;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.6);
}


.dgx-server-main {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 14px;
}

.dgx-server-nodes {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.dgx-server-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.dgx-server-node svg {
  width: 14px;
  height: 14px;
}

.dgx-server-node.ok {
  color: #2ecc71;
}

.dgx-server-node.fail {
  color: #ff4d4f;
}


/* ===============================
   SERVER INLINE STATUS
================================ */

.dgx-server-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  font-size: 22px;
  font-weight: 600;
}




/* HEADER FLEX */

.dgx-server-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* STATUS DOT */

.dgx-server-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}

/* ONLINE */
.dgx-server-dot.online {
  background: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
}

/* OFFLINE */
.dgx-server-dot.offline {
  background: #ff4d4f;
  box-shadow: 0 0 10px rgba(255, 77, 79, 0.7);
}

/* PARTIAL */
.dgx-server-dot.partial {
  background: #ffb020;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.7);
}

/* TEXTO */

.dgx-server-main {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Opcional: pulso suave si online */

.dgx-server-dot.online::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.4);
  animation: dgxPulse 2s infinite;
}

@keyframes dgxPulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}


/* ===================================================== */
/* ================= RECENT CHARACTERS ================= */
/* ===================================================== */

.dgx-recent-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dgx-recent-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  transition: all 0.25s ease;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  margin-bottom:15px;
}


.dgx-recent-item:last-child {
	border-bottom: none;
}

.dgx-recent-item:hover {
  opacity: 1;	
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
}


.dgx-recent-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dgx-recent-name {
  font-weight: 600;
  font-size: 14px;
}

.dgx-recent-meta {
  font-size: 12px;
  opacity: 0.7;
  color: rgba(255,255,255,0.6);  
}


.dgx-recent-map {
  font-size: 11px;
  opacity: 0.5;
}

.dgx-recent-status {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 14px;
}

/* ONLINE */

.dgx-recent-status.online {
	background: rgba(46, 204, 113, 0.15);
	color: #2ecc71;
}

.online-glow {
	box-shadow: 0 0 12px rgba(46, 204, 113, 0.15);
}

/* OFFLINE */

.dgx-recent-status.offline {
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.6);
}



/* ===================================================== */
/* ================= NEWS & RANKING ==================== */
/* ===================================================== */

.dgx-news-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dgx-news-item:last-child {
  border-bottom: none;
}

.dgx-ranking-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}


/* ===================================================== */
/* ================= CHARACTER GRID ==================== */
/* ===================================================== */


.dgx-character-grid{

display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;

}

/* tablet */

@media (max-width:1100px){

.dgx-character-grid{
grid-template-columns:repeat(2, 1fr);
}

}

/* mobile */

@media (max-width:700px){

.dgx-character-grid{
grid-template-columns:1fr;
}

}

.dgx-character-card {
  display: flex;
  align-items: flex-start;   /* 👈 cambiar */
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: 0.25s ease;
}


.dgx-character-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.05);
}

.dgx-character-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dgx-character-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--dgx-text-main);
  text-decoration: none;
}

.dgx-character-name:hover {
  color: var(--dgx-accent-primary);
}

.dgx-character-meta {
  font-size: 12px;
  opacity: 0.7;
}

.dgx-character-stats {
  font-size: 12px;
  opacity: 0.8;
}

.dgx-character-zeny {
  font-size: 13px;
  margin-top: 4px;
}


.dgx-total-zeny {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}



/* ===================================================== */
/* ================= ITEM GRID ========================= */
/* ===================================================== */

.dgx-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 15px;
}


.dgx-item-icon img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.dgx-item-name {
  font-size: 13px;
  color: var(--dgx-text-main);
}

.dgx-item-amount {
  font-size: 12px;
  opacity: 0.7;
}


.dgx-form-grid label {
  font-size: 12px;
  color: var(--dgx-text-muted);
  margin-bottom: 6px;
  display: block;
}

.dgx-search-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}


.dgx-col-card .dgx-item-title {
    gap: 12px;
}

/* ===================================================== */
/* ================= ADMIN TABLE ======================= */
/* ===================================================== */

.dgx-table-admin th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dgx-text-muted);
}

.dgx-table-admin td {
  font-size: 14px;
  padding: 14px 12px;  
}

.dgx-table-admin tr {
  transition: background 0.2s ease;
}

.dgx-table-admin tr:hover {
  background: rgba(255,255,255,0.05);
}

.dgx-credits {
  font-weight: 500;
}

.dgx-mono {
  font-family: monospace;
  font-size: 13px;
  opacity: 0.8;
}

.dgx-muted {
  color: var(--dgx-text-muted);
  font-size: 13px;
  opacity:.6;
}


/* ================= SEARCH AREA ================= */

.dgx-search-card {
  padding: 40px; /* más aire lateral */
}

.dgx-search-header {
  margin-bottom: 35px;
}

.dgx-search-header h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
}


/* Campo */

.dgx-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}

/* Label */

.dgx-field label {
  font-size: 12px;
  margin-bottom: 10px;
  color: var(--dgx-text-muted);
  opacity: 0.6;
  letter-spacing: .4px;
}

/* Inputs con más presencia */

.dgx-field .dgx-input {
  width: 100%;
  height: 46px;
}


/* INPUT + SELECT UNIFICADO */
.dgx-input,
.dgx-select {
    width: 100%;
    padding: 8px 10px;
	background: rgba(20,24,45,0.8);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
    color: #e0e6ff;
    font-size: 13px;
    transition: all .2s ease;
	height: 44px; 
	backdrop-filter: blur(8px);
}




/* HOVER */
.dgx-input:hover,
.dgx-select:hover {
    border-color: #3b82f6;
}

/* FOCUS */
.dgx-input:focus,
.dgx-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}



/* ACTIONS */
.dgx-search-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}


/* Acciones */

.dgx-search-actions {
  margin-top: 45px; /* más separación */
  display: flex;
  gap: 16px;
}



/* ===========================
   DASHBOARD FULL WIDTH BLOCK
=========================== */

.dgx-dashboard-full {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
  margin: 0px 0px 20px 0px;
}

.dgx-card-welcome {
  padding: 16px;
  background: transparent;
  border: 1px solid var(--dgx-border);
  border-radius: var(--dgx-radius-md);
  position:relative;
  overflow:visible;  
}

.dgx-card-welcome h3 {
  font-size: 20px;
  margin-bottom: 18px;
}

.dgx-card-welcome p {
  line-height: 1.6;
  opacity: 0.85;
}

.dgx-card-welcome a {
  color: #FFF;
  text-decoration: none;
  font-weight: 500;
}

.dgx-card-welcome a:hover {
  text-decoration: none;
}


/* ========================= */
/* NEWS GRID */
/* ========================= */

.dgx-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.dgx-news-card {
  background: var(--dgx-bg-card);
  border: 1px solid var(--dgx-border);
  border-radius: var(--dgx-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
}

.dgx-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255,0,120,0.15);
}

/* Thumbnail */
.dgx-news-thumb {
  height: 180px;
  background-size: cover;
  background-position: center;
}

/* Content */
.dgx-news-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}




/* ===== NEWS ARTICLE ===== */

.dgx-news-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Header */

.dgx-news-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 18px;
}

/* Meta */

.dgx-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    font-size: 14px;
    color: #9aa4c6;
}

.dgx-news-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dgx-news-meta-item [data-lucide] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Divider */

.dgx-news-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin: 25px 0 35px 0;
}

/* Body editorial */

.dgx-news-body-editorial {
    font-size: 17px;
    line-height: 1.75;
    color: #d6dcff;
}

.dgx-news-body-editorial p {
    margin-bottom: 18px;
}

/* Actions */

.dgx-news-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 45px;
    flex-wrap: wrap;
    gap: 15px;
}


.dgx-news-excerpt {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 16px;
  color: var(--dgx-text-muted);
}

/* Footer */
.dgx-news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgx-link-edit {
  font-size: 13px;
  opacity: 0.7;
}

.dgx-link-edit:hover {
  color: #ff3366;
}

.dgx-news-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgx-news-link {
  color: var(--dgx-accent-primary);
  text-decoration: none;
  font-weight: 500;
}

/* HERO */
.dgx-news-hero {
  padding: 40px 30px;
  border-radius: var(--dgx-radius-md);
  background: linear-gradient(135deg,
    rgba(120,0,255,0.15),
    rgba(255,0,120,0.12));
  margin-bottom: 20px;
}

.dgx-news-hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

/* BODY */
.dgx-news-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dgx-text-main);
}

.dgx-news-body p {
  margin-bottom: 16px;
}

/* META */
.dgx-news-meta {
  font-size: 13px;
  color: var(--dgx-text-muted);
}




.dgx-news-editor {
  width: 100%;
  max-width: 100%;
  padding:30px;
}

.dgx-news-editor .dgx-form {
  width: 100%;
}

.dgx-news-editor textarea {
  width: 100%;
}

.tox-tinymce {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: #101425 !important;
}

.tox .tox-toolbar,
.tox .tox-statusbar {
  background: #0f1424 !important;
}

/* WRAPPER CENTRADO 2/3 */
.dgx-news-wrapper {
    width: 66.666%;
    margin: 0 auto;
}

/* GRID DE OPCIONES */
.dgx-news-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Responsive */
@media (max-width: 1200px) {
    .dgx-news-wrapper {
        width: 90%;
    }

    .dgx-news-options-grid {
        grid-template-columns: 1fr;
    }
}



/*-------------*/
/* HEADER CARD */
/*-------------*/

.dgx-card-header {
    padding: 0px 0px 10px 0px;
}

.dgx-card-header h3 {
    margin:  0px 0px 10px 0px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9aa4c3;
	font-weight: 400;
}

/* ROW */
.dgx-news-row {
    display: flex;
    gap: 18px;
    padding: 10px 0px;
    align-items: flex-start;
}

/* THUMBNAIL estilo avatar */
.dgx-news-avatar {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.dgx-news-thumb {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.05);
}

/* MAIN */
.dgx-news-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* FILA 1 */
.dgx-news-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgx-news-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* TITLE */
.dgx-news-title-link {
    font-size: 15px;
    font-weight: 600;
    color: #e7ecff;
    text-decoration: none;
}

.dgx-news-title-link:hover {
    color: #ff5fa2;
}

/* FILA 2 */
.dgx-news-meta-row {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: #8d97b5;
}

.dgx-news-meta-row span,
.dgx-news-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}



.dgx-news-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* META */
.dgx-news-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: #8d97b5;
}

.dgx-news-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* EDIT */
.dgx-news-edit {
    color: #ff5fa2;
    text-decoration: none;
}

.dgx-news-edit:hover {
    opacity: 0.8;
}

/* DIVIDER */
.dgx-news-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0 25px;
}


/* Header tabla */
.dgx-pages-header {
    display: flex;
    justify-content: space-between;
    padding: 18px 25px;
    font-weight: 600;
    font-size: 14px;
    color: #9aa4c6;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Row */
.dgx-pages-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.25s ease;
}

.dgx-pages-row:hover {
    background: rgba(255,255,255,0.02);
}

/* Title */
.dgx-pages-title a {
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.dgx-pages-title a:hover {
    color: #ff2e82;
}

.dgx-pages-path {
    font-size: 13px;
    color: #7c86a7;
    margin-top: 4px;
}

/* Actions */
.dgx-pages-actions {
    display: flex;
    gap: 12px;
}


/* ===== Tabla moderna estilo dashboard ===== */

.dgx-table-header,
.dgx-table-row {
  display: grid;
  grid-template-columns: 2.5fr 1.2fr 1fr 1fr 1.5fr;
  align-items: center;
  padding: 14px 18px;
}

.dgx-table-header {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8e99c5;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dgx-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s ease;
}

.dgx-table-row:hover {
  background: rgba(255,255,255,0.02);
}

/* Columnas */
.dgx-col-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}


/* ==============================
   SORTABLE HEADERS DGX
============================== */

.dgx-table th a {
  color: var(--dgx-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease;
}

.dgx-table th a:hover {
  color: #fff;
}

.dgx-table th a span {
  opacity: 0.6;
}



/* ========================= */
/* NEWS LIST STYLE           */
/* ========================= */

.dgx-news-list-card {
    display: flex;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(145deg, #11162a, #0f1426);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.25s ease;
    margin-bottom: 15px;
}

.dgx-news-list-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.12);
}

/* Thumbnail */

.dgx-news-list-thumb {
    width: 110px;
    height: 90px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Content */

.dgx-news-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Top row */

.dgx-news-list-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.dgx-news-list-title {
    font-size: 18px;
    font-weight: 600;
    color: #e6ecff;
    text-decoration: none;
    transition: color 0.25s ease;
}

.dgx-news-list-title:hover {
    color: #ff2e82;
}

/* Meta */

.dgx-news-list-meta {
    display: flex;
    gap: 25px;
    margin-top: 6px;
    font-size: 14px;
    color: #9aa4c6;
}

.dgx-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dgx-meta-item [data-lucide] {
    width: 15px;
    height: 15px;
    opacity: 0.7;
}

/* Action badges */

.dgx-news-list-actions {
    display: flex;
    gap: 10px;
}


/* ===============================
   WALLET CART
================================ */

.dgx-wallet-cart {
  position: relative;
  cursor: pointer;
}

.dgx-wallet-cart svg {
  width: 20px;
  height: 20px;
}

/* Badge flotante */

.dgx-cart-badge {
  position: absolute;

  top: -6px;
  right: -8px;

  min-width: 16px;
  height: 16px;

  padding: 0 4px;

  background: #ff2e82;
  color: #fff;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
}




.dgx-news-list-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 22px;
  transition: all .25s ease;
}

.dgx-news-list-card:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}


.dgx-news-list-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.dgx-news-list-content {
  flex: 1;
}

.dgx-news-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dgx-news-list-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.dgx-news-list-title:hover {
  color: #ff2e82;
}

.dgx-news-list-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: .75;
}

.dgx-separator {
  opacity: .4;
}


/* Contenedor meta */
.dgx-news-list-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #9aa4c6;
}

/* Íconos dentro del meta */
.dgx-news-list-meta [data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  margin-right: 6px;
  opacity: .75;
  vertical-align: middle;
}

/* Hover sutil en la card */
.dgx-news-list-card:hover [data-lucide] {
  opacity: 1;
}


/* ================= SERVER INFO ================= */

.dgx-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 20px 0 40px;
}

.dgx-server-card {
  background: linear-gradient(145deg,#111528,#1a2038);
  border: 1px solid var(--dgx-border);
  border-radius: var(--dgx-radius-md);
  padding: 20px;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: var(--dgx-shadow-soft);
}

.dgx-server-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 0, 120, 0.2);
}

.dgx-server-icon {
  margin-bottom: 10px;
  color: var(--dgx-accent-primary);
  display: flex;
  justify-content: center;
}

.dgx-server-icon svg {
  width: 28px;
  height: 28px;
}

.dgx-server-label {
  font-size: 13px;
  color: var(--dgx-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.dgx-server-value {
  font-size: 22px;
  font-weight: 600;
}


.dgx-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.dgx-class-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--dgx-radius-md);
  padding: 14px;
  text-align: center;
}

.dgx-class-name {
  font-size: 13px;
  opacity: 0.7;
}

.dgx-class-total {
  font-size: 18px;
  font-weight: 600;
}


/* ================= SERVER STATUS ================= */

.dgx-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.dgx-status-card {
  background: linear-gradient(145deg,#111528,#1a2038);
  border: 1px solid var(--dgx-border);
  border-radius: var(--dgx-radius-md);
  padding: 20px;
  transition: 0.25s ease;
}

.dgx-status-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(255, 0, 120, 0.15);
}

.dgx-status-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 14px;
}

.dgx-status-title svg {
  width: 18px;
  height: 18px;
  color: var(--dgx-accent-primary);
}

.dgx-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--dgx-text-muted);
}

.dgx-status-row svg {
  width: 16px;
  height: 16px;
}

.dgx-status-online {
  font-weight: 600;
}


/* ================= MINI STATUS CARDS ================= */

.dgx-status-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 15px;
}

.dgx-status-mini-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--dgx-radius-md);
  padding: 16px;
  text-align: center;
  transition: 0.25s ease;
}

.dgx-status-mini-card svg {
  width: 18px;
  height: 18px;
  margin-bottom: 6px;
}

.dgx-status-label {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 4px;
}

.dgx-status-value {
  font-size: 20px;
  font-weight: 600;
}

/* ================= STATUS COLORS ================= */

.status-online {
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.08);
}

.status-online .dgx-status-value {
  color: #22c55e;
}

.status-offline {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.08);
}

.status-offline .dgx-status-value {
  color: #ef4444;
}

.status-neutral {
  border-color: rgba(255,255,255,0.08);
}

.status-online .dgx-status-value,
.status-offline .dgx-status-value {
  font-size: 22px;
}

.status-online .dgx-status-value {
  text-shadow: 0 0 8px rgba(34,197,94,0.4);
}

.status-offline .dgx-status-value {
  text-shadow: 0 0 8px rgba(239,68,68,0.4);
}



/* ================= JOB GRID ================= */

.dgx-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.dgx-job-card {
  background: linear-gradient(145deg,#111528,#1a2038);
  border: 1px solid var(--dgx-border);
  border-radius: var(--dgx-radius-md);
  padding: 18px;
  text-align: center;
  transition: 0.25s ease;
}

.dgx-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 0, 120, 0.15);
}

.dgx-job-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

.dgx-job-sprite-wrapper img {
  height: 85px;
  image-rendering: pixelated;
  margin-bottom: 12px;
}

.dgx-job-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Texto pequeño */

.dgx-job-population {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 6px;
}


/* ===================================================== */
/* =================== SEX BADGE ======================== */
/* ===================================================== */

.dgx-sex-badge {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 10px;
	flex-shrink: 0;

	box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}

/* ICON */

.dgx-sex-badge img {
	width: 14px;
	height: 14px;
	filter: brightness(0) invert(1);
}

/* FEMALE */

.dgx-sex-badge.female {
	background: linear-gradient(90deg, #e6b4c9, #dba2be);
}

/* MALE */

.dgx-sex-badge.male {
	background: linear-gradient(90deg, #a8c2f2, #8fb0e8);
}



/* ================= Barra proporcional refinada ================= */

.dgx-job-bar {
  display: flex;
  width: 100%;
  height: 16px; /* un poco más ancha */
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
  background: rgba(255,255,255,0.04);
  font-size: 10px;
  font-weight: 600;
  color: #ffffffcc;
  line-height: 1;
}


.dgx-job-bar-female {
  background: linear-gradient(
    90deg,
    #e6b4c9,
    #dba2be
  );
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 6px;
  transition: width 0.4s ease;
}

.dgx-job-bar-male {
  background: linear-gradient(
    90deg,
    #a8c2f2,
    #8fb0e8
  );
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  transition: width 0.4s ease;
}

.dgx-bar-label-left,
.dgx-bar-label-right {
  white-space: nowrap;
  pointer-events: none;
}


.dgx-job-bar span {
  white-space: nowrap;
}


/* Jobs vacíos */

.job-empty {
  opacity: 0.4;
}

.job-empty img {
  filter: grayscale(100%);
}

.dgx-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}

.sprite-baby img {
  transform: scale(0.75);
}



/* MENÚ */
.dgx-ranking-menu {
  display: flex;
  gap: 18px;
  margin: 18px 0 30px;
  flex-wrap: wrap;
}

.dgx-ranking-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: .75;
  text-decoration: none;
  color: inherit;
  transition: 0.2s ease;
}

.dgx-ranking-menu a:hover {
  opacity: 1;
}

/* TOP 1 */
.dgx-rank-first {
  background: linear-gradient(135deg,#1e1b4b,#312e81);
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 30px;
  text-align: center;
}

.dgx-rank-badge {
  font-size: 14px;
  opacity: .6;
  margin-bottom: 10px;
}

.dgx-rank-name {
  font-size: 22px;
  font-weight: 600;
}

.dgx-rank-meta {
  font-size: 14px;
  opacity: .7;
  margin-top: 6px;
}

/* TOP 4 */
.dgx-rank-top4 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dgx-rank-card {
  background: #111827;
  padding: 18px;
  border-radius: 12px;
}

/* RESTO */
.dgx-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dgx-rank-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: #0f172a;
  border-radius: 10px;
}



/* WRAPPER CENTRADO */
.dgx-rank-first-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.dgx-rank-first-card {
  width: 65%;
  min-width: 750px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 40px;
  border-radius: 20px;
  position: relative;

  background: rgba(20, 25, 45, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 0 40px rgba(255,255,255,0.03);
}

@media (max-width: 1000px) {
  .dgx-rank-first-card {
    width: 95%;
    min-width: unset;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* IZQUIERDA */
.dgx-rank-first-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dgx-character-layout {
  display: grid;
  grid-template-columns: 70px 150px 70px;
  align-items: center;
  gap: 20px;
}

.dgx-equip-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dgx-equip-slot {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
}

/*----CENTRO -*/


.dgx-character-card-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}


/* Marco visual */
.dgx-sprite-frame {
  width: 140px;
  height: 280px;
  position: relative;
  border-radius: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.dgx-sprite-frame:hover {
  transform: translateY(-4px);
}

/* Sprite absoluto */
.dgx-sprite-inner {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 200% auto;
  background-position: left center;
  image-rendering: pixelated;
}

/* Male */
.dgx-sprite-inner.male {
  background-position: left center;
}

/* Female */
.dgx-sprite-inner.female {
  background-position: right center;
}

/* Single sprite */
.dgx-sprite-inner.single {
  background-size: contain;
  background-position: center center;
}


.dgx-character-xp {
  font-size: 13px;
  opacity: 0.8;
}



/* DERECHA */
.dgx-rank-first-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.dgx-rank-first-name {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 14px;
}

.dgx-rank-first-line {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 8px;
}

.dgx-rank-first-stats,
.dgx-rank-first-zeny,
.dgx-rank-first-guild,
.dgx-rank-first-marriage {
  font-size: 14px;
  opacity: .8;
  margin-bottom: 6px;
}

.dgx-online-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #16a34a;
  color: white;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(22,163,74,.6);
}

.dgx-rank-first-card {
  position: relative;
}

.dgx-guild-emblem {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.dgx-equip-slot img {
  width: 32px;
  height: 32px;
}

.dgx-ranking-filter {
  margin-top: 20px;
  margin-bottom: 30px;
  justify-content: flex-start;
}

.dgx-ranking-filter label {
  font-size: 13px;
  opacity: .75;
  margin-right: 12px;
}

/* ================= TOPBAR RANKING FILTER ================= */

.dgx-topbar-ranking {
  align-items: center;
}

.dgx-topbar-filter {
  display: flex;
  align-items: center;
  gap: 12px;  
}


.dgx-topbar-filter select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e0e6ff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.dgx-topbar-filter option {
    background: var(--dgx-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--dgx-text-main);	
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}


.dgx-topbar-label {
  font-size: 13px;
  opacity: .7;
  white-space: nowrap;
}

/* Ajuste fino del selector dentro del topbar */
.dgx-topbar-selector {
  height: 34px;
  padding: 4px 12px;
  font-size: 13px;
  min-width: 180px;
}

@media (max-width: 768px) {
  .dgx-topbar-ranking {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .dgx-topbar-filter {
    width: 100%;
    justify-content: space-between;
  }

  .dgx-topbar-selector {
    width: 100%;
	
  }
}


/* =========================
   DONATE PAGE
========================= */

.dgx-page-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.dgx-page-title {
  display:flex;
  align-items:center;
  gap:10px;
}

.dgx-page-submenu {
  display:flex;
  gap:15px;
}

.dgx-submenu-item {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  font-size:13px;
  opacity:.7;
  transition:.2s;
}

.dgx-submenu-item:hover,
.dgx-submenu-item.active {
  background:rgba(255,255,255,0.06);
  opacity:1;
}



.dgx-card > .dgx-form-centered {
  padding-top: 10px;
}

.dgx-info-box,
.dgx-warning-box {
  display:flex;
  gap:10px;
  padding:12px;
  border-radius:10px;
  margin-bottom:15px;
  font-size:14px;
}

.dgx-info-box {
  background:rgba(0,150,255,0.08);
}

.dgx-warning-box {
  background:rgba(255,140,0,0.08);
}

.dgx-exchange-rate {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px 0;
}

.dgx-rate-item {
  display:flex;
  align-items:center;
  gap:8px;
}

.dgx-divider {
  border:none;
  height:1px;
  background:rgba(255,255,255,0.1);
  margin:20px 0;
}

.dgx-form-group {
  margin-bottom:20px;
}

.dgx-input-with-icon {
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.05);
  padding:8px 12px;
  border-radius:10px;
}

.dgx-input-with-icon input {
  background:none;
  border:none;
  outline:none;
  color:white;
  width:100%;
}

.dgx-button-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:600;
  background:linear-gradient(90deg,#ff7a18,#ffb347);
  color:white;
  transition:.2s;
}

.dgx-button-primary:hover {
  transform:translateY(-2px);
}

/* ==========================================
   ICON ALIGN FIX – DONATIONS MODULE
========================================== */

/* Contenedores que llevan icono + texto */
.dgx-topbar > div,
.dgx-warning-box,
.dgx-exchange-rate > div,
.dgx-summary-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Iconos Lucide uniformes */
.dgx-topbar svg,
.dgx-info-box svg,
.dgx-warning-box svg,
.dgx-exchange-rate svg,
.dgx-summary-block svg {
  width: 18px;
  height: 18px;
  min-width: 18px;       /* evita que se compriman */
  display: inline-flex;
  vertical-align: middle;
  stroke-width: 2;
}

/* Mejora visual en topbar */
.dgx-topbar svg {
  opacity: .9;
}

/* Icono dentro de cajas */
.dgx-info-box svg,
.dgx-warning-box svg {
  margin-top: 1px; /* micro ajuste óptico */
}

/* Línea tipo 1.00 MXN = 1 crédito */
.dgx-exchange-rate > div {
  font-size: 14px;
  opacity: .9;
}

/* Donación mínima */
.dgx-exchange-rate strong {
  font-weight: 600;
}

.dgx-info-box svg {
  color: #4db3ff;
}

.dgx-warning-box svg {
  color: #ffb347;
}

.dgx-exchange-rate svg {
  color: #b8b8ff;
}

/* ==========================================
   DONATION REVIEW BLOCK
========================================== */

.dgx-donation-review {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  margin-top: 20px;
  backdrop-filter: blur(10px);
}

.dgx-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  opacity: .9;
}

.dgx-review-header svg {
  width: 20px;
  height: 20px;
}

.dgx-review-body {
  margin-bottom: 20px;
}

.dgx-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 6px 0;
}

.dgx-review-amount {
  font-weight: 600;
  font-size: 16px;
}

.dgx-review-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 10px 0;
}

.dgx-review-credits {
  font-size: 15px;
}

.dgx-review-credit-value {
  font-weight: 700;
  font-size: 18px;
  color: #ffb347;
}

.dgx-review-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgx-review-reset {
  font-size: 13px;
  opacity: .6;
  text-decoration: underline;
}

.dgx-review-reset:hover {
  opacity: 1;
}

.dgx-paypal-button {
  display: flex;
  align-items: center;
}

/* ==========================================
   ENHANCED DONATION REVIEW
========================================== */

.dgx-donation-review {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 28px;
  margin-top: 24px;
  backdrop-filter: blur(12px);
  position: relative;
}

/* Header */
.dgx-review-header {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  margin-bottom: 22px;
  font-size: 16px;
  font-weight: 600;
}

.dgx-review-header > strong {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge cambiar monto */
.dgx-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  transition: .2s ease;
  text-decoration: none;
  margin-left: auto;  
}

.dgx-review-badge:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

/* Body */
.dgx-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 10px 0;
}

.dgx-review-amount {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .3px;
}

.dgx-review-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}

/* Créditos destacados */
.dgx-review-credit-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 22px;
  color: #ffb347;
}

.dgx-review-credit-value svg {
  width: 20px;
  height: 20px;
}

/* Footer */
.dgx-review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

/* Secure label */
.dgx-review-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: .7;
}

/* PayPal button container */
.dgx-paypal-button {
  display: flex;
  align-items: center;
}

/* Icon consistency */
.dgx-donation-review svg {
  width: 18px;
  height: 18px;
}

/* ==========================================
   PAYPAL BUTTON RESTYLE
========================================== */

.dgx-paypal-button input[type="image"],
.dgx-paypal-button input[type="submit"],
.dgx-paypal-button button {
  background: linear-gradient(
    180deg,
    #ffc439 0%,
    #ffb347 100%
  ) !important;

  color: #111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;

  border-radius: 999px !important;
  padding: 10px 24px !important;

  border: none !important;
  cursor: pointer !important;

  transition: all .2s ease !important;
  box-shadow: 0 4px 12px rgba(255, 196, 57, 0.25);
}

.dgx-paypal-button input[type="image"]:hover,
.dgx-paypal-button input[type="submit"]:hover,
.dgx-paypal-button button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 196, 57, 0.4);
}



/* ==========================================
   ONLINE PAGE STYLES
========================================== */

.dgx-online-count {
  display:flex;
  align-items:center;
  gap:10px;

  margin:18px 0 22px 0;
  font-size:16px;
  font-weight:600;

  padding:14px 18px;
  border-radius:14px;

  background: rgba(76,217,100,.06);
  border:1px solid rgba(76,217,100,.18);
}

.dgx-online-count svg {
  width:18px;
  height:18px;
  color:#4cd964;
}



/* ==========================================
   ONLINE CHARACTER STYLES
========================================== */

.dgx-char-cell {
  min-width: 220px;
}

.dgx-char-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dgx-char-sprite img {
  height: 38px;
  image-rendering: pixelated;
}

.dgx-char-info {
  display: flex;
  flex-direction: column;
}

.dgx-char-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dgx-char-level-badge {
  font-size: 12px;
  opacity: .6;
}

.dgx-high-level {
  font-size: 12px;
  color: gold;
}

/* Clase */
.dgx-class-cell {
  white-space: nowrap;
}

.dgx-class-cell .dgx-class-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dgx-class-cell svg {
  width: 14px;
  height: 14px;
  opacity: .7;
}

/* Colores sutiles por clase */
.dgx-table tr:hover {
  background: rgba(255,255,255,.04);
}

.dgx-filter-bar {
  display:flex;
  gap:12px;
  margin-bottom:18px;
}

.dgx-filter-bar input {
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--dgx-border);
  background:rgba(255,255,255,.03);
  color:white;
  font-size:13px;
}

/* ==========================================
   ONLINE GUILD EMBLEM
========================================== */

.dgx-guild-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dgx-guild-emblem {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}


.dgx-guild-name{
    display:flex;
    align-items:center;
    gap:10px;
	font-weight: 500;

}


.dgx-character-header {
  display:flex;
  gap:24px;
  align-items:center;
}

.dgx-character-avatar {
  width:80px;
  height:80px;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dgx-character-meta {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dgx-character-level span {
  font-size:20px;
  font-weight:700;
}

.dgx-grid-3 {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin-top:20px;
}

/* Tablet */
@media (max-width: 1200px) {
  .dgx-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .dgx-grid-3 {
    grid-template-columns: 1fr;
  }
}

.dgx-info-row,
.dgx-stat-row {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid var(--dgx-border);
}



/* ===================================================== */
/* GRID 5 */
/* ===================================================== */

.dgx-grid-5{

	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:20px;

}



.dgx-character-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.dgx-mini-link {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--dgx-text-muted);
  text-decoration:none;
  padding:4px 8px;
  border-radius:8px;
  transition:all .2s ease;
}

.dgx-mini-link:hover {
  background:rgba(255,255,255,.05);
  color:#fff;
}

.dgx-mini-link.dgx-warning:hover {
  background:rgba(255,100,100,.12);
  color:#ff6b6b;
}


.dgx-character-dropdown-trigger {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
  transition:background .2s ease;
  position:relative;
}

.dgx-character-dropdown-trigger:hover {
  background:rgba(255,255,255,.05);
}

/* =================================
   DROPDOWN ADAPTATIVO INTELIGENTE
================================= */

.dgx-topbar {
  overflow:visible;
}

.dgx-topbar-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.dgx-topbar-title .dgx-btn{
    padding:6px 10px;
    font-size:13px;
}

.dgx-character-dropdown {
  position:absolute;
  top:0;
  left:calc(100% + 12px); /* default: derecha */

  min-width:220px;
  background:linear-gradient(145deg,#1a1f2b,#101522);
  border:1px solid var(--dgx-border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:10px;

  display:flex;
  flex-direction:column;

  transform:translateX(-6px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:all .18s ease;
  z-index:999;
}

.dgx-character-dropdown.active {
  transform:translateX(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Modo hacia la izquierda */
.dgx-character-dropdown.left {
  left:auto;
  right:calc(100% + 12px);
}

/* Modo móvil */
@media (max-width: 768px) {
  .dgx-character-dropdown {
    top:calc(100% + 8px);
    left:0;
    right:auto;
    transform:translateY(-6px) scale(.96);
  }

  .dgx-character-dropdown.active {
    transform:translateY(0) scale(1);
  }
}

.dgx-character-dropdown a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  color:var(--dgx-text);
  font-size:14px;
  transition:background .2s ease;
}

.dgx-character-dropdown a:hover {
  background:rgba(255,255,255,.05);
}

.dgx-character-dropdown a.danger:hover {
  background:rgba(255,80,80,.12);
  color:#ff6b6b;
}

.dgx-dropdown-divider {
  height:1px;
  background:var(--dgx-border);
  margin:6px 0;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}

.dgx-chevron-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  transition:all .2s ease;
}

.dgx-character-dropdown-trigger:hover .dgx-chevron-wrap {
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.dgx-chevron-wrap svg {
  width:14px;
  height:14px;
  opacity:.85;
}

/* ================================
   CHEVRON ANIMATION
================================ */

.dgx-character-dropdown-trigger.active .dgx-chevron-wrap {
  background:rgba(255,255,255,.18);
}

.dgx-character-dropdown-trigger.active .dgx-chevron-wrap svg {
  transform:rotate(180deg);
  transition:transform .2s ease;
}

/* ================================
   DROPDOWN ANIMATION
================================ */

.dgx-character-dropdown {
  transform:translateY(-6px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:all .18s ease;
}

.dgx-character-dropdown.active {
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

.dgx-character-dropdown a.disabled {
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}

.dgx-character-dropdown::before {
  content:"";
  position:absolute;
  top:14px;
  left:-6px;
  width:12px;
  height:12px;
  background:#1a1f2b;
  border-left:1px solid var(--dgx-border);
  border-top:1px solid var(--dgx-border);
  transform:rotate(45deg);
}

/* =========================
   TABS
========================= */

.dgx-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Tablet */
@media (max-width: 992px) {
  .dgx-tabs {
    gap: 10px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .dgx-tabs {
    gap: 8px;
  }
} 

.dgx-tab {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--dgx-border);
  cursor:pointer;
  transition:all .2s ease;
  font-size:14px;
  color:var(--dgx-text-muted);
}

.dgx-tab {
  flex: 1 1 auto;
  min-width: 130px;
  justify-content: center;
}

@media (max-width: 600px) {
  .dgx-tab {
    flex: 1 1 calc(50% - 8px);
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* Alternativa más premium (scroll horizontal) */
  .dgx-tabs::-webkit-scrollbar {
    display: none;
  }
}

.dgx-tab:hover {
  background:rgba(255,255,255,.08);
  color:#fff;
}

.dgx-tab.active {
  background:linear-gradient(145deg,#1a1f2b,#101522);
  color:#fff;
  border-color:rgba(255,255,255,.15);
}

.dgx-tab-content {
  display:none;
  animation:fadeIn .2s ease;
}

.dgx-tab-content.active {
  display:block;
}

/* =========================
   TAB COUNTER
========================= */

.dgx-tab-count {
  margin-left:6px;
  padding:2px 6px;
  font-size:12px;
  border-radius:20px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-weight:600;
  min-width:20px;
  text-align:center;
}

/* =========================
   TAB COUNTER ADVANCED
========================= */

.dgx-tab-count {
  margin-left:8px;
  padding:3px 8px;
  font-size:12px;
  border-radius:20px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:all .25s ease;
}

.dgx-tab-divider {
  opacity:.4;
}

/* Estados */

.dgx-normal {
  background:rgba(120,255,120,.08);
  color:#7CFF9B;
}

.dgx-success {
  background: rgba(80,200,120,.15);
  color: #4ADE80;
}

.dgx-warning {
  background:rgba(255,200,0,.12);
  color:#FFC83D;
}

.dgx-danger {
  background:rgba(255,80,80,.15);
  color:#FF6B6B;
  animation:dgxPulse 1.5s infinite;
}

/* Pulse elegante */

@keyframes dgxPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,80,80,.4); }
  70%  { box-shadow:0 0 0 6px rgba(255,80,80,0); }
  100% { box-shadow:0 0 0 0 rgba(255,80,80,0); }
}

.dgx-stats-grid {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:15px;
  margin-top:15px;
}

/* Tablet */
@media (max-width: 992px) {
  .dgx-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .dgx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dgx-stat-box {
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:12px;
  text-align:center;
  transition:.2s ease;
}

.dgx-stat-box:hover {
  background:rgba(255,255,255,.08);
}

@media (max-width: 768px) {
  .dgx-char-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}


.dgx-member-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}

@media (max-width: 768px) {
  .dgx-member-grid {
    grid-template-columns: 1fr;
  }
}

.dgx-member-card {
  display:flex;
  gap:15px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--dgx-border);
  transition:.2s ease;
}

.dgx-member-card:hover {
  background:rgba(255,255,255,.07);
}

.dgx-member-avatar {
  width:70px;
  height:70px;
}

.dgx-member-info {
  flex:1;
}

.dgx-member-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.dgx-member-meta {
  font-size:13px;
  color:var(--dgx-text-muted);
  margin-bottom:8px;
}

.dgx-member-guild {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

.dgx-status {
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.dgx-status.online {
  background:#1f3d2e;
  color:#34d399;
}

.dgx-status.offline {
  background:#3d1f24;
  color:#f87171;
}

.dgx-member-card {
  position: relative;
}

.dgx-best-friend {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(145deg,#1a1f2b,#101522);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.dgx-best-friend i {
  width:18px;
  height:18px;
  color:#facc15; /* amarillo */
}

.dgx-member-card:has(.dgx-status.online) .dgx-best-friend {
  box-shadow: 0 0 10px rgba(250,204,21,.6);
}

/* =========================
   INVENTORY GRID
========================= */

.dgx-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}

.dgx-item-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dgx-border);
  border-radius: 12px;
  padding: 12px;
  transition: .2s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration: none;  
  gap: 12px;  
  height:150px;
}


.dgx-item-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.05);
}

/* EQUIPPED */
.dgx-item-card.equipped {
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59,130,246,.4);
}

/* ICON */
.dgx-item-icon {
  position: relative;
  width: 64px;
  height: 64px;
  padding:8px;
  margin: auto;
}

.dgx-item-icon img {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* STACK */
.dgx-item-amount {
  position:absolute;
  bottom:-6px;
  right:-6px;
  background:#111827;
  padding:2px 6px;
  font-size:12px;
  border-radius:8px;
  font-weight:600;
}

/* REFINE */
.dgx-item-refine {
  position:absolute;
  top:-6px;
  left:-6px;
  background:#facc15;
  color:#111;
  padding:2px 6px;
  font-size:12px;
  border-radius:8px;
  font-weight:700;
}

/* NAME */
.dgx-item-name {
  font-size:13px;
  margin-bottom:4px;
}

/* SLOTS */
.dgx-item-slots {
  font-size:12px;
  color:var(--dgx-text-muted);
}

/* BOUND */
.dgx-item-bound {
  font-size:11px;
  margin-top:4px;
  color:#f87171;
}



/* MODS -*/

.dgx-moderation-grid {
  display: grid;
  gap: 20px;
}

.dgx-moderation-box {
  background: rgba(255,255,255,0.03);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}

.dgx-moderation-box h4 {
  margin-bottom: 12px;
  font-size: 15px;
  color: #cfd6ff;
}

/* Moderation Grid 2 columnas */
.dgx-moderation-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Responsive */
@media (max-width: 992px) {
  .dgx-moderation-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Moderation Box */
.dgx-moderation-box {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 20px;
}


.dgx-input {
  width: 100%;
  background: rgba(20,24,45,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  resize: vertical;
}

.dgx-table-modern {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dgx-table-row {
  display: grid;
  grid-template-columns: 120px 180px 1fr 120px;
  gap: 15px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 14px;
}



.dgx-table-header {
  background: rgba(255,255,255,0.06);
  font-weight: 600;
}


.dgx-pages-table .dgx-table-row{
    grid-template-columns: 2fr 1fr auto;
}


/* HEADER */
.dgx-table-modern .dgx-header {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
	text-transform: uppercase;
    white-space: nowrap; /* 🔥 evita salto de línea */
    border-bottom: 1px solid rgba(255,255,255,0.08); /* 🔥 separador */
    padding-bottom: 10px;
    margin-bottom: 6px;
}

.dgx-header a {
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
    transition: all .2s ease;
}

.dgx-header a:hover {
    opacity: 1;
    color: #6366f1;
}


/*--------------*/
/* AUTOCOMPLETE */
/*--------------*/

.dgx-autocomplete {
  position: relative;
}

.dgx-autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: rgba(18,22,38,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;

  max-height: 220px;
  overflow-y: auto;
  display: none;

  z-index: 4000;
}

.dgx-autocomplete-results div {
  padding: 10px 14px;
  cursor: pointer;
  transition: background .2s ease;
}

.dgx-autocomplete-results div:hover {
  background: rgba(255,255,255,0.06);
}

/* ===== DGX SWITCH CLEAN ===== */


.dgx-switch {
  position: relative;
  display: inline-block;
  width: 48px !important;
  height: 26px !important;
  min-height: 26px !important;
  flex-shrink: 0;
}

.dgx-switch input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.dgx-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 30px;
  transition: .25s ease;
}

.dgx-slider {
  background: red !important;
  height: 26px !important;
  width: 48px !important;
  display: block !important;
}

.dgx-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.dgx-switch input:checked + .dgx-slider {
  background: linear-gradient(135deg,#ff2e82,#8c5bff);
}

.dgx-switch input:checked + .dgx-slider::before {
  transform: translateX(22px);
}


.dgx-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 26px;
}

.dgx-switch-label {
  opacity: .85;
}




.dgx-autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dgx-autocomplete-item strong {
  display: block;
}

.dgx-autocomplete-item small {
  font-size: 12px;
}

.dgx-autocomplete-item:hover {
  background: rgba(255,255,255,0.06);
}



.dgx-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dgx-switch-label {
  opacity: .85;
}

.dgx-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.dgx-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #ff2e82;
}

/* ================= TOGGLE BADGE ICON ================= */


.dgx-toggle-btn:hover {
  background: linear-gradient(90deg,#ff2e82,#8c00ff);
  color: #fff;
  box-shadow: 0 0 10px rgba(255,0,120,.6);
}

/* Animación al hacer click */
.dgx-toggle-btn:active svg {
  transform: rotate(360deg);
}

.dgx-toggle-btn:hover svg {
  transform: rotate(360deg);
}

.dgx-ticket-card {
	margin-top:20px;
}

/* ===== TICKET STATUS GLOW ===== */

.dgx-ticket-card.pending {
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.2),
              0 0 30px rgba(255, 176, 32, 0.08);
}

.dgx-ticket-card.resolved {
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.2),
              0 0 30px rgba(46, 204, 113, 0.08);
}

.dgx-ticket-card.closed {
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.2),
              0 0 30px rgba(255, 77, 79, 0.08);
}

/* ================= DISCORD STYLE THREAD ================= */

.dgx-thread {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dgx-message {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background .2s ease;
  padding: 6px;
  }
  

.dgx-message.staff .dgx-message-bubble {
  background:linear-gradient(135deg,#ff2e82,#b312ff);
  color:white;
}

.dgx-message-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  object-fit: cover;
}

.dgx-message-content {
  flex: 1;
}

.dgx-message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.dgx-message-username {
  font-weight: 600;
}

.dgx-message-time {
  font-size: 12px;
  opacity: .5;
}

.dgx-message-bubble {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  line-height: 1.6;
}

/* STAFF STYLE */

.dgx-message.staff .dgx-message-bubble {
  background: rgba(255,0,120,0.08);
  border: 1px solid rgba(255,0,120,0.2);
}

.dgx-message.staff .dgx-message-username {
  color: #ff4da6;
}

.dgx-section-divider {
  font-size: 13px;
  font-weight: 600;
  opacity: .6;
  margin: 25px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dgx-reply-box {
  margin-top: 25px;
}

.dgx-reply-box textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--dgx-text-main);
  font-size: 14px;
  transition: all .2s ease;
}

.dgx-reply-box textarea:focus {
  outline: none;
  border-color: #ff2e82;
  box-shadow: 0 0 0 2px rgba(255,46,130,0.2);
}

.dgx-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ===== PRIMER MENSAJE CON EVIDENCIAS ===== */

.dgx-message-main {
  margin-top: 8px;
}

.dgx-message-main.with-evidence {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.dgx-message-text {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  line-height: 1.6;
}

/* ===== EVIDENCIAS ===== */

.dgx-message-evidence {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dgx-evidence-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px;
  border-radius: 12px;
  font-size: 13px;
}

.dgx-evidence-title {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: .7;
}

.dgx-evidence-block img {
  width: 100%;
  border-radius: 8px;
  transition: transform .2s ease;
}

.dgx-evidence-block img:hover {
  transform: scale(1.02);
}

/* Responsive */

@media (max-width: 900px) {
  .dgx-message-main.with-evidence {
    grid-template-columns: 1fr;
  }
}

/* ===== EVIDENCIAS ===== */

.dgx-evidence-header {
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dgx-evidence-group {
  margin-bottom: 15px;
}

.dgx-evidence-group-title {
  font-size: 13px;
  font-weight: 600;
  opacity: .7;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.dgx-evidence-carousel {
  position: relative;
}

.dgx-evidence-item {
  display: none;
}

.dgx-evidence-item.active {
  display: block;
}

.dgx-evidence-item img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease;
}

.dgx-evidence-item img:hover {
  transform: scale(1.02);
}

.dgx-evidence-nav {
  margin-top: 8px;
  text-align: center;
}

.dgx-evidence-nav span {
  cursor: pointer;
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
}

.dgx-video-wrapper iframe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

/* ===== MODAL ===== */

.dgx-modal {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.dgx-modal.active {
  display: flex;
}

.dgx-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
}

.dgx-video-link {
  margin-top: 8px;
  font-size: 13px;
}

.dgx-video-link a {
  color: #ff2e82;
  text-decoration: none;
}

.dgx-video-link a:hover {
  text-decoration: underline;
}

.dgx-video-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 8px;
  background: #111;
}

.dgx-video-preview img {
  width: 100%;
  display: block;
}

.dgx-video-generic {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  color: #ccc;
}

.dgx-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: .2s ease;
}

.dgx-video-preview:hover .dgx-video-overlay {
  opacity: 1;
}

.dgx-video-overlay svg {
  width: 50px;
  height: 50px;
  color: white;
}

.dgx-video-modal-inner {
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16/9;
}

.dgx-video-modal-inner iframe {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* ================= HEADER RIGHT ================= */

.dgx-ticket-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}

/* ================= ACTIONS ================= */

.dgx-ticket-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.dgx-ticket-action {
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:#9aa4c6;
  transition:all .18s ease;
  text-decoration:none;
}

.dgx-ticket-action svg {
  width:16px;
  height:16px;
}

.dgx-ticket-action:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* Color variants */

.dgx-ticket-action.success:hover {
  background:rgba(34,197,94,.15);
  color:#22c55e;
}

.dgx-ticket-action.warning:hover {
  background:rgba(234,179,8,.15);
  color:#eab308;
}

.dgx-ticket-action.danger:hover {
  background:rgba(239,68,68,.15);
  color:#ef4444;
}

.dgx-ticket-action.info:hover {
  background:rgba(59,130,246,.15);
  color:#3b82f6;
}

.dgx-ticket-action.purple:hover {
  background:rgba(168,85,247,.15);
  color:#a855f7;
}

/* ================= BADGE ALIGNMENT ================= */



/* Smooth status change animation */
.dgx-badge.status-anim {
  animation:badgePulse .3s ease;
}

@keyframes badgePulse {
  0%   { transform:scale(.9); opacity:.6; }
  100% { transform:scale(1); opacity:1; }
}
}

.dgx-ticket-icon [data-lucide] {
  width: 32px;
  height: 32px;
  stroke-width: 1.8;
  margin-right: 6px;
  opacity: .75;
  vertical-align: middle;
}


.dgx-ticket-title {
  margin:0;
  font-weight:700;
  font-size:18px;
}



.dgx-ticket-user {
  display:flex;
  gap:14px;
  align-items:start;
}

.dgx-ticket-avatar {
  width:64px;
  height:64px;
  border-radius:14px;
}

.dgx-ticket-user-info {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dgx-ticket-username {
  font-weight:600;
}

.dgx-ticket-id {
  opacity:.5;
  margin-left:6px;
}

.dgx-ticket-meta {
  display:flex;
  gap:16px;
  font-size:12px;
  opacity:.6;
}

.dgx-ticket-meta span {
  display:flex;
  align-items:center;
  gap:6px;
}

.dgx-system-log {
  margin:12px 0;
  font-size:13px;
  opacity:.6;
  text-align:center;
}

.dgx-ticket-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.dgx-ticket-row-top {
  margin-bottom:18px;
}

.dgx-ticket-left {
  display:flex;
  align-items:center;
  gap:14px;
}

.dgx-ticket-top-right {
  display:flex;
  align-items:center;
  gap:16px;
}

.dgx-ticket-bottom-right {
  display:flex;
  align-items:center;
}

.dgx-ticket-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.dgx-day-divider {
  text-align:center;
  margin:25px 0;
  font-size:12px;
  opacity:.6;
  position:relative;
}
.dgx-day-divider:before,
.dgx-day-divider:after{
  content:'';
  position:absolute;
  top:50%;
  width:35%;
  height:1px;
  background:rgba(255,255,255,.08);
}
.dgx-day-divider:before{ left:0; }
.dgx-day-divider:after{ right:0; }

.dgx-message.grouped .dgx-message-avatar {
  visibility:hidden;
}

.dgx-message.grouped .dgx-message-header {
  display:none;
}

.dgx-message.grouped {
  margin-top:-8px;
}



/* ===== Reply Container ===== */
.dgx-reply-container {
  position: relative;
  padding: 8px; /* aire interno */
}

.dgx-card:has(.dgx-reply-container) {
  padding: 24px;
}

/* ===== Textarea ===== */
.dgx-reply-textarea {
  width: 100%;
  resize: none;
  min-height: 90px;
  max-height: 280px;

  padding: 18px 80px 18px 18px;

  border-radius: 14px;

  font-size: 15px;        /* antes probablemente 14px */
  line-height: 1.6;       /* más aire entre renglones */
  letter-spacing: 0.2px;  /* ligera mejora de legibilidad */

  font-weight: 400;
}

.dgx-reply-textarea::placeholder {
  opacity: 0.5;
  font-size: 14px;
}

/* ===== Reply Send Fix ===== */
.dgx-reply-send {
  position: absolute;
  right: 14px;
  bottom: 14px;

  width: 42px !important;
  height: 42px !important;

  min-width: 42px;
  max-width: 42px;

  border-radius: 50% !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg,#ff2e82,#8c5bff);
  border: none;

  box-shadow: 0 0 10px rgba(140,91,255,.4);
}

.dgx-reply-send:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(140,91,255,.5);
}

/* ===== Scrollbar personalizado ===== */

.dgx-reply-textarea::-webkit-scrollbar {
  width: 6px;
}

.dgx-reply-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.dgx-reply-textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#ff2e82,#8c5bff);
  border-radius: 10px;
}

.dgx-reply-textarea::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#ff4f9a,#a070ff);
}

/* Firefox */
.dgx-reply-textarea {
  scrollbar-width: thin;
  scrollbar-color: #8c5bff transparent;
}

.dgx-reply-textarea::-webkit-scrollbar-thumb {
  opacity: 0;
}

.dgx-reply-textarea:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* Contenedor */
.dgx-context-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}

/* Fuerza que NO ocupen 100% */
.dgx-btn-inline {
  display: inline-flex !important;
  width: auto !important;
}

/* Tamaño compacto real */
.dgx-btn-xs {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

.dgx-context-actions .dgx-btn {
  opacity: .9;
  transition: .2s ease;
}

.dgx-context-actions .dgx-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  color: #FFF;
}

/* Bloque personaje */
.dgx-ticket-character {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.dgx-ticket-char-avatar {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Usamos tu sistema split */
.dgx-ticket-character .dgx-job-sprite {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.dgx-ticket-char-name {
  font-size: 15px;
  font-weight: 600;
}

.dgx-ticket-char-meta {
  font-size: 12px;
  opacity: .8;
}

.dgx-ticket-char-map {
  font-size: 11px;
  opacity: .6;
}

.dgx-ticket-char-label {
  font-size: 10px;
  opacity: .5;
  margin-top: 2px;
}


.dgx-job-sprite-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.dgx-job-img {
  height: 100%;
  image-rendering: pixelated;
  position: absolute;
  bottom: 0;
}


/* IMPORTANTE: evita que flex estire el avatar */
.dgx-ticket-char-block .dgx-char-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}


/* Masculino */
.dgx-job-sprite.split.male {
  background-position: 0% 10%;
}

/* Femenino */
.dgx-job-sprite.split.female {
  background-position: 100% 10%;
}

.dgx-video-carousel .dgx-evidence-item {
  display: none;
}

.dgx-video-carousel .dgx-evidence-item.active {
  display: block;
}

/* =========================
   NAV ACTIVE
========================= */

.dgx-evidence-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  font-size: 13px;
  transition: all .25s ease;
}

.dgx-evidence-nav span:hover {
  background: rgba(255,255,255,0.12);
}

.dgx-evidence-nav span.active {
  background: linear-gradient(135deg,#ff2e82,#8c5bff);
  color: #fff;
}

/* =========================
   SLIDE EFFECT
========================= */

.dgx-evidence-carousel {
  position: relative;
  overflow: hidden;
}

.dgx-evidence-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(30px);
  transition: all .35s ease;
  pointer-events: none;
}

.dgx-evidence-item.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* =========================
   NEW MESSAGE ANIMATION
========================= */

.dgx-message {
  animation: dgxFadeIn .4s ease forwards;
}

@keyframes dgxFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   CHAT BADGE STYLE
========================= */

.dgx-chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
  transition: all .2s ease;
  font-size: 14px;
}

.dgx-chat-badge:hover {
  background: linear-gradient(135deg,#ff2e82,#8c5bff);
  color: #FFF;
}

/* =========================
   INBOX STYLE
========================= */

.dgx-ticket-inbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =====================================================
   SERVICE DESK INBOX (ISOLATED)
===================================================== */

.dgx-sd-inbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dgx-sd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  padding: 18px 22px;
  border-radius: 16px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  text-decoration: none;
  color: inherit;

  transition: all .25s ease;
}

.dgx-sd-row:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

.dgx-sd-row.closed {
  opacity: .65;
}

.dgx-sd-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dgx-sd-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgx-sd-id {
  font-weight: 600;
  opacity: .5;
}

.dgx-sd-subject {
  font-weight: 600;
  font-size: 15px;
}

.dgx-sd-meta {
  font-size: 13px;
  opacity: .6;
}

.dgx-sd-status {
  display: flex;
  align-items: center;
}

/* ==========================================
   SERVICE DESK - NEW MESSAGE BADGE
========================================== */

.dgx-sd-new-badge {
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;

  border-radius: 20px;

  background: rgba(34,197,94,.15);
  color: #22c55e;

  border: 1px solid rgba(34,197,94,.4);

  animation: dgxNewPulse 2s infinite;
}

@keyframes dgxNewPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.dgx-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dgx-field label svg {
  width: 15px;
  height: 15px;
  opacity: .6;
}

/* =================================
   CENTERED FORM WRAPPER
================================= */

.dgx-form-centered {
  width: 66%;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 992px) {
  .dgx-form-centered {
    width: 90%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .dgx-form-centered {
    width: 100%;
  }
}

/* ==============================
   FORM ROW (2 columns)
============================== */

.dgx-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Responsive */

@media (max-width: 600px) {
  .dgx-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   FORM ACTIONS
============================== */

.dgx-form-actions {
  display: flex;
  justify-content: flex-start;   /* 👈 alineado a la izquierda */
  gap: 14px;
  margin-top: 35px;
}

/* Tamaño uniforme real */

.dgx-btn-sm {
  padding: 10px 22px;
  font-size: 14px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quitar cualquier width forzado */

.dgx-form-actions .dgx-btn {
  width: auto !important;
  min-width: auto !important;
}

.dgx-form-actions .dgx-btn-primary {
  width: auto !important;
}


.dgx-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Tablet */
@media (max-width: 1200px) {
  .dgx-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil */
@media (max-width: 768px) {
  .dgx-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .dgx-form-grid {
    grid-template-columns: 1fr;
  }
  .dgx-field-full {
    grid-column: span 1;
  }
}

/* Static value */
.dgx-static-value {
  height: 44px;              /* mismo alto que dgx-input */
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
}

/* Actions */
.dgx-form-actions {
  margin-top: 24px;
  text-align: right;
}


/* Contenedor */
.dgx-table-modern {
  display: flex;
  flex-direction: column;
}

/* Fila */
.dgx-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 20px;
  padding: 14px 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin: 6px 0px;
}

/* Header */
.dgx-table-head {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Hover */
.dgx-table-row:not(.dgx-table-head):hover {
  background: rgba(255,255,255,.03);
  border-radius: 12px;
}

/* Acciones */
.dgx-actions-col{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

/* Responsive */
@media (max-width: 992px) {
  .dgx-table-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dgx-actions-col {
    justify-content: flex-start;
  }

  .dgx-table-head {
    display: none;
  }
}

/* Botón icono base */
.dgx-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all .2s ease;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

/* Hover general */
.dgx-icon-btn:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

/* Edit */
.dgx-icon-edit:hover {
  color: #FFC83D;
  border-color: rgba(255,200,61,.4);
}

/* Delete */
.dgx-icon-delete:hover {
  color: #FF6B6B;
  border-color: rgba(255,107,107,.4);
}

.dgx-auto-expand {
  line-height: 1.7;
  font-size: 15px;
}


.dgx-character-avatar-profile {
  width:48px;
  height:48px;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  border:2px solid rgba(255, 255, 255, 0.06);

  display:flex;
  align-items:center;
  justify-content:center;
}


/* =====================================
   REGISTER FORM FIX
===================================== */

.auth-register .dgx-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* evita que columnas antiguas rompan el layout */

.auth-register .dgx-col-2 {
  grid-column: auto;
}

/* ===============================
   REGISTER INFO BOX FIX
================================ */

.auth-register .register-info{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.auth-register .register-info .dgx-info-intro{
  margin-bottom:6px;
}

.auth-register .register-info .dgx-info-list{
  margin:0;
  padding-left:18px;
}

.auth-register .register-info{
  max-width:600px;
  margin:0 auto 20px auto;
}

/* =====================================
   DGX INFO BOX FIX
===================================== */

.dgx-info-box{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dgx-info-box p{
  margin:0;
}

.dgx-info-box{
  padding:22px 26px;
  border-radius:14px;
  background:rgba(30,40,80,.35);
  border:1px solid rgba(255,255,255,.06);
}

/*- RULES -*/
.rules-container{
max-width:900px;
margin:auto;
line-height:1.6;
}

.rules-title{
display:flex;
align-items:center;
gap:10px;
font-size:30px;
margin-bottom:10px;
}

.rules-intro{
margin-bottom:25px;
opacity:.9;
}

.rules-section{
margin-bottom:25px;
padding:22px;
border-radius:8px;
border:1px solid #2b2b2b;
background:#111;
}

.rules-heading{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
margin-bottom:15px;
}

.rules-list{
padding-left:0;
list-style:none;
}

.rules-list li{
margin-bottom:18px;
}

.rules-list strong{
display:flex;
align-items:center;
gap:8px;
font-size:16px;
}

.rules-warning{
border-color:#5a3b00;
background:#1a1305;
}

.rules-footer{
margin-top:30px;
padding:20px;
border-radius:8px;
background:#161616;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-weight:600;
}


.dgx-shop-categories{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}

.dgx-shop-categories a{
display:flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:8px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
font-size:13px;
transition:.2s;
}

.dgx-shop-categories a:hover{
background:rgba(255,255,255,.08);
}

.dgx-cat-icon{
width:18px;
height:18px;
image-rendering: pixelated;
}




.dgx-downloads{
margin: auto;
padding: 20px;
}

.dgx-downloads .dgx-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:#0f172a;
border:1px solid #1f2a44;
padding:6px 12px;
border-radius:20px;
font-size:13px;
margin:auto;
}

.dgx-downloads .dgx-header{
text-align:center;
margin-bottom:35px;
}

.dgx-downloads .dgx-header h1{
font-size:40px;
margin:10px 0;
}

.dgx-downloads .dgx-header p{
opacity:.8;
}

.dgx-downloads .dgx-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.dgx-downloads .dgx-card{
background:#0f172a;
border:1px solid #1f2a44;
border-radius:16px;
padding:25px;
transition:.2s;
}

.dgx-downloads .dgx-card:hover{
border-color:#3b82f6;
}

.dgx-downloads .dgx-card-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}

.dgx-downloads .dgx-card-header svg{
width:26px;
height:26px;
}

.dgx-downloads .dgx-card-title{
font-size:18px;
font-weight:600;
}

.dgx-downloads .dgx-card-desc{
opacity:.8;
margin-bottom:15px;
}

.dgx-downloads .dgx-size{
font-size:13px;
opacity:.6;
margin-bottom:12px;
}

.dgx-downloads .dgx-btn{
display:block;
text-align:center;
padding:12px;
border-radius:10px;
background:#e5e7eb;
color:#000;
text-decoration:none;
font-weight:600;
}

.dgx-downloads .dgx-btn:hover{
background:#fff;
}

.dgx-downloads .dgx-help{
margin-top:50px;
border-radius:16px;
border:1px solid #1f2a44;
overflow:hidden;
}

.dgx-downloads .dgx-help-header{
padding:20px;
background:#0f172a;
border-bottom:1px solid #1f2a44;
}

.dgx-downloads .dgx-help-body{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
padding:20px;
}

.dgx-downloads .dgx-problems{
background:#2a1d0d;
border-radius:12px;
padding:20px;
}

.dgx-downloads .dgx-problems ul{
margin-top:10px;
padding-left:20px;
}

.dgx-downloads .dgx-links{
display:flex;
flex-direction:column;
gap:15px;
}

.dgx-downloads .dgx-link{
display:flex;
align-items:center;
gap:12px;
padding:16px;
border-radius:12px;
border:1px solid #1f2a44;
background:#0f172a;
text-decoration:none;
color:white;
}

.dgx-downloads .dgx-link:hover{
border-color:#3b82f6;
}





.dgx-character-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

/* =================================
   LEFT SIDE
================================= */

.dgx-character-left{
display:flex;
align-items:center;
gap:18px;
min-width:220px;
}



/* =================================
   META
================================= */

.dgx-character-meta{
display:flex;
flex-direction:column;
gap:4px;
}

.dgx-character-job{
font-size:18px;
font-weight:600;
opacity:.9;
}

.dgx-character-level span{
font-size:22px;
font-weight:700;
}

.dgx-character-level small{
font-size:12px;
opacity:.7;
}

/* =================================
   RIGHT SIDE
================================= */

.dgx-character-bars{
width:380px;
}



.dgx-bar {
  width:100%;
  height:10px;
  background:rgba(255,255,255,.05);
  border-radius:6px;
  overflow:hidden;
  margin:6px 0;
}


.dgx-bar-fill{
height:100%;
transition: width .6s ease;
}

.dgx-bar-hp{
background:linear-gradient(90deg,#ff4b4b,#ff9a3c);
}

.dgx-bar-sp{
background:linear-gradient(90deg,#4b7bff,#3cd1ff);
}

.dgx-bar-fill.hp {
  height:100%;
  background:#ff4d4f;
}

.dgx-bar-fill.sp {
  height:100%;
  background:#4da6ff;
}

.dgx-bar-exp-fill{
background:linear-gradient(90deg,#9d4bff,#ff4b9a);
}

.dgx-bar-text{
font-size:12px;
opacity:.75;
margin-top:4px;
margin-bottom:6px;
}

.dgx-xp-total{
margin-top:6px;
font-size:13px;
opacity:.9;
}

/* =================================
   AVATAR FRAME
================================= */

.dgx-character-avatar{
display:flex;
align-items:center;
justify-content:center;
}

.dgx-item-frame,
.dgx-item-frame-2,
.dgx-avatar-frame,
.dgx-avatar-frame-full {
border-radius:14px;
padding:2px;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(0,0,0,.25)
);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 0 14px rgba(0,0,0,.6),
inset 0 0 10px rgba(255,255,255,.03);

overflow:hidden;
}

.dgx-avatar-frame{
width:90px;
height:90px;
}

.dgx-avatar-frame-small {
width:48px;
height:48px;
}

.dgx-avatar-frame-full {
width:90px;
height:150px;
}


/* AVATAR */

.dgx-avatar-frame img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.dgx-item-frame{
width:64px;
height:64px;
}

.dgx-item-frame img{
width:48px;
height:48px;
}


.dgx-item-frame-2{
width:180px;
height:230px;
padding: 6px;
}

.dgx-item-frame-2 img{
width:140px;
height:auto;
border-radius:12px;
	object-fit: contain;
}

/* =================================
   BARS
================================= */

.dgx-character-bars{
width:380px;
}

.dgx-bar{
height:8px;
background:rgba(255,255,255,.08);
border-radius:6px;
overflow:hidden;
margin-bottom:10px;
}

.dgx-bar-fill{
height:100%;
transition:width .7s ease;
}

.dgx-bar-hp{
background:linear-gradient(90deg,#ff4b6e,#ff7a18);
}

.dgx-bar-sp{
background:linear-gradient(90deg,#7c7cff,#00d4ff);
}

.dgx-bar-exp{
background:linear-gradient(90deg,#facc15,#fb923c);
}

.dgx-bar-label{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
opacity:.8;
margin-bottom:4px;
}

.dgx-bar-label svg{
width:14px;
height:14px;
}

.dgx-xp-total{
margin-top:8px;
font-size:13px;
opacity:.9;
}

.dgx-bar-hp.low{
box-shadow:0 0 8px rgba(255,0,0,.7);
}

.dgx-bar-exp{
background:linear-gradient(90deg,#a855f7,#ec4899);
}



/* ICON COLORS */

.dgx-bar-label .lucide-heart{
color:#ff4d6d;
}

.dgx-bar-label .lucide-sparkles{
color:#7c7cff;
}

.dgx-bar-label .lucide-star{
color:#facc15;
}

.lucide-heart{
color:#ff2d55;
}

.lucide-sparkles{
color:#8c5bff;
}

.lucide-star{
color:#f59e0b;
}


.dgx-party-leader-badge{

position:absolute;
top:-10px;
left:-10px;

background:linear-gradient(135deg,#ffd34d,#ff8c00);

width:26px;
height:26px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

color:white;
font-size:14px;

box-shadow:
0 0 8px rgba(255,180,0,.7),
0 0 14px rgba(255,140,0,.4);

z-index:5;

}

.dgx-avatar-frame.leader{

border:2px solid rgba(255,180,0,.6);

box-shadow:
0 0 8px rgba(255,200,0,.4);

}

.dgx-best-friend-badge{

position:absolute;
top:-6px;
left:-6px;

width:22px;
height:22px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(135deg,#ff5aa5,#ff2e82);

color:white;

box-shadow:
0 0 6px rgba(255,80,150,.6),
0 0 12px rgba(255,50,120,.4);

}

.dgx-header-time{
display:flex;
flex-direction:column;
align-items:flex-end;
margin-right:14px;
font-size:13px;
line-height:1.3;
}

.dgx-time-row{
display:flex;
gap:12px;
align-items:center;
}

.dgx-date{
opacity:.75;
}

.dgx-local-time strong,
.dgx-server-time strong{
font-weight:600;
letter-spacing:.5px;
}


.dgx-clock{
margin-right:10px;
}

.dgx-clock-flag{
font-size:14px;
margin-left:4px;
}

.dgx-clock .dgx-wallet-item{
cursor:default;
}


/*-GUILD-*/




.dgx-online-members{
	color:#22c55e;
	font-weight:600;
}

/* TABLA GREMIO */

.dgx-table-modern .dgx-table-row{
    display:grid;
    grid-template-columns:

        70px   /* ID */
        80px   /* Nivel */
        1.6fr  /* Gremio */
        1.2fr  /* Lider */
        140px  /* Integrantes */
        110px; /* Promedio */

    align-items:center;
    gap:20px;
}

.dgx-table-header{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.dgx-guild-emblem{
    width:24px;
    height:24px;
    object-fit:contain;
    image-rendering:pixelated;
    border-radius:4px;
}


.dgx-guild-hero{
display:flex;
gap:20px;
align-items:center;
padding:25px;
background:linear-gradient(135deg,#1d2236,#0f1424);
border-radius:12px;
margin-bottom:20px;
}

.dgx-guild-emblem-lg img{
width:64px;
height:64px;
image-rendering:pixelated;
}

.dgx-guild-title{
font-size:28px;
margin:0;
}

.dgx-guild-meta{
margin-top:8px;
display:flex;
gap:10px;
}


.dgx-guild-notice{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
}


.dgx-table th{
text-align:left;
padding:10px;
font-size:13px;
opacity:.7;
}

.dgx-table td{
padding:10px;
border-top:1px solid rgba(255,255,255,.05);
}



.dgx-guild-info{
	display:flex;
	flex-direction:column;
	gap:10px;
}


.dgx-guild-members{
text-align:right;
}

.dgx-members-count{
font-size:20px;
}

.dgx-online{
color:#3cff7a;
font-weight:600;
}

.dgx-avatar-online{
box-shadow:0 0 8px #3cff7a;
}

.dgx-guild-crown{
position:absolute;
top:-6px;
right:-6px;
font-size:12px;
}

/* =====================================================
   GUILD MEMBERS TABLE FIX
===================================================== */

.dgx-guild-table {
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* HEADER */

.dgx-guild-table .dgx-table-header{
  display:grid;

  grid-template-columns:

    90px   /* avatar */
    1.6fr  /* nombre */
    1.2fr  /* clase */
    80px   /* base */
    80px   /* job */
    1fr    /* posición */
    140px  /* exp */
    100px  /* tax */
    140px; /* login */

  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;

  padding:12px 18px;
}

/* ROW */

/* =========================================
   GUILD MEMBER TABLE GRID
========================================= */

.dgx-guild-table .dgx-table-row{

display:grid;

grid-template-columns:

80px      /* Avatar */
2.2fr     /* Nombre + Clase */
1fr       /* Base/Job */
2fr       /* Posición */
1.2fr     /* Exp Donada */
0.8fr     /* Impuesto */
1.4fr;    /* Última conexión */

align-items:center;
gap:10px;

}

/* columnas centradas */

/* columnas centradas */

.dgx-guild-table .dgx-center{

text-align:center;
display:flex;
align-items:center;
justify-content:center;

}

.dgx-guild-table .dgx-table-row:hover{
  background:rgba(255,255,255,.06);
}

/* Avatar column */

.dgx-guild-table .dgx-avatar-frame{
  width:70px;
  height:70px;
  position:relative;
}

/* Leader crown */

.dgx-guild-table .dgx-guild-crown{
  position:absolute;
  top:-6px;
  right:-6px;
  font-size:14px;
}

/* Online glow */

.dgx-guild-table .dgx-avatar-online{
  box-shadow:0 0 10px #3cff7a;
}


.dgx-guild-member-row{
	position:relative;
}

.dgx-party-leader-badge{
	position:absolute;
	top:-10px;
	left:-10px;

	width:30px;
	height:30px;

	display:flex;


	background:linear-gradient(145deg,#ffcc4d,#ff9f1a);
	border-radius:50%;

	box-shadow:
	0 0 10px rgba(255,180,0,0.6),
	0 0 20px rgba(255,140,0,0.4);

	z-index:5;
}

.dgx-party-leader-badge svg{
	width:16px;
	height:16px;
	color:#2b1a00;
}

.dgx-guild-member-row.leader{
	border:1px solid rgba(255,200,0,0.3);
	box-shadow:0 0 20px rgba(255,200,0,0.08);
}


.dgx-members-total{
	font-size:32px;
	font-weight:700;
	color:#fff;
}

.dgx-members-online{
	font-size:14px;
	margin-left:4px;
}

.dgx-members-count{
	display:flex;
	align-items:center;
	gap:6px;
}


/* =====================================================
   GUILD HEADER FIX
===================================================== */

/* utilidades */

.dgx-flex-between{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
}

.dgx-flex{
	display:flex;
}

.dgx-align-center{
	align-items:center;
}

.dgx-gap-20{
	gap:20px;
}


/* ===============================
   GUILD HEADER LEVEL
================================ */

.dgx-guild-level{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:0px;
	min-width:320px;
}

.dgx-guild-level-row{
	display:flex;
	align-items:center;
	gap:12px;
}


.dgx-guild-xpbar{
	width:260px;
	height:8px;
	background:rgba(255,255,255,.08);
	border-radius:6px;
	overflow:hidden;
	position:relative;
}

.dgx-guild-xpfill{
	height:100%;
	background:linear-gradient(90deg,#6c7cff,#8fa2ff);
	border-radius:6px;
	min-width:2px; /* evita que desaparezca */
}


.dgx-guild-exp-text{

	width:280px;
	text-align:center;
	font-size:12px;
	letter-spacing:.5px;
	color:#9aa4c8;

}





/* ===============================
   LEFT INFO
================================ */

.dgx-guild-info{
	display:grid;
	grid-template-columns:1fr;
	row-gap:6px;
}

.dgx-guild-master,
.dgx-guild-average{
	display:flex;
	flex-direction:column;
}

.dgx-guild-master .dgx-value,
.dgx-guild-average .dgx-value{
	font-weight:600;
}


/* ===============================
   EMBLEM
================================ */

.dgx-guild-emblem-lg{
	width:70px;
	height:70px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.dgx-guild-emblem-lg img{
	width:64px;
	height:64px;
	image-rendering:pixelated;
}


/* ===============================
   MEMBERS
================================ */

.dgx-guild-members{
	text-align:right;
	min-width:160px;
}

.dgx-members-count{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:6px;
}

.dgx-members-total{
	font-size:32px;
	font-weight:700;
}

.dgx-members-online{
	font-size:14px;
}

.dgx-guild-left{
	align-items:flex-start;
}


/* =====================================================
   GUILD BADGE
===================================================== */

.dgx-guild-emblem-wrapper{
	position:relative;
}

.dgx-guild-rank-badge{
	position:absolute;
	top:-8px;
	left:-8px;
	padding:3px 8px;
	border-radius:6px;
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
	gap:4px;
	box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* GOLD */

.dgx-rank-gold{
	background:linear-gradient(145deg,#ffd700,#f0b000);
	color:#1a1a1a;
}

/* SILVER */

.dgx-rank-silver{
	background:linear-gradient(145deg,#d0d0d0,#9f9f9f);
	color:#1a1a1a;
}

/* BRONZE */

.dgx-rank-bronze{
	background:linear-gradient(145deg,#b87333,#7a4a21);
	color:#fff;
}

/* NEUTRAL */

.dgx-rank-neutral{
	background:linear-gradient(145deg,#5d5dfc,#3434a8);
	color:#fff;
}


/* =====================================================
   META ROW
===================================================== */

.dgx-meta-row{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
}

.dgx-guild-meta{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.dgx-meta-stats{
	font-size:14px;
	color:#a9b0d3;
}

/* =====================================================
   GUILD STATS
===================================================== */

.dgx-guild-stats-grid{

	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	margin-top:20px;

}

.dgx-guild-stat{
	text-align:center;
	
	background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 22px;
    transition: all .25s ease;	

}

.dgx-guild-stat .dgx-label{

	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:13px;
	color:#9aa4c8;
	margin-bottom:6px;

}

.dgx-guild-stat .dgx-value{

	font-size:22px;
	font-weight:700;
	color:#fff;

}


/* =====================================================
   GUILD RELATIONS
===================================================== */

.dgx-guild-relations{

display:flex;
flex-direction:column;
gap:10px;
margin-top:15px;

}

.dgx-guild-relation{

display:flex;
align-items:center;
gap:8px;

padding:10px 12px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
border-radius:8px;

transition:.2s;

}

.dgx-guild-relation:hover{

background:rgba(255,255,255,0.06);

}


/* =====================================================
   GUILD RELATIONS
===================================================== */

.dgx-relation-emblem{

width:46px;
height:46px;

display:flex;
align-items:center;
justify-content:center;

}

.dgx-relation-emblem img{

width:42px;
height:42px;

image-rendering:pixelated;

}

.dgx-relation-info{

display:flex;
flex-direction:column;

}

.dgx-relation-title{

display:flex;
align-items:center;
gap:8px;

}

.dgx-relation-leader{

display:flex;
align-items:center;
gap:6px;

font-size:13px;
margin-top:3px;

}

/* =====================================================
   GUILD EXPULSIONS
===================================================== */

.dgx-guild-expulsions{

display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;

}

.dgx-expulsion{

padding:12px 14px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
border-radius:8px;

}

.dgx-expulsion-name{

font-weight:600;

}

.dgx-expulsion-reason{

margin-top:4px;
font-size:13px;
color:#9aa4c8;

}

/* =========================================
   MEMBER TABLE IMPROVEMENTS
========================================= */

.dgx-member-info{

display:flex;
flex-direction:column;
gap:2px;

}

.dgx-member-name{

font-weight:600;
font-size:15px;

}

.dgx-member-job{

font-size:12px;
opacity:.65;

}

.dgx-center{
	text-align:center;
}


/* =================================
DGX CHARACTER PREFERENCES
================================= */

.dgx-pref-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;
}

@media(max-width:1100px){
.dgx-pref-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:700px){
.dgx-pref-grid{
grid-template-columns:1fr;
}
}

.dgx-pref-card{
padding:26px;
text-align:center;
}

.dgx-pref-icon{
font-size:26px;
margin-bottom:12px;
opacity:.9;
}

.dgx-pref-title{
font-weight:600;
margin-bottom:6px;
}

.dgx-pref-desc{
font-size:.9rem;
opacity:.65;
margin-bottom:18px;
}


/* =========================
DGX SWITCH
========================= */

.dgx-switch{
display:flex;
justify-content:center;
margin-top:10px;
cursor:pointer;
}

.dgx-switch input{
display:none;
}

.dgx-switch-visual{
width:52px;
height:26px;
background:#3a3f55;
border-radius:30px;
position:relative;
transition:.25s;
display:block;
}

.dgx-switch-circle{
width:22px;
height:22px;
background:white;
border-radius:50%;
position:absolute;
top:2px;
left:2px;
transition:.25s;
}

/* activo */

.dgx-switch input:checked + .dgx-switch-visual{
background:linear-gradient(135deg,#ff2e82,#8c5bff);
}

.dgx-switch input:checked + .dgx-switch-visual .dgx-switch-circle{
transform:translateX(26px);
}

.dgx-pref-card{
padding:26px;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

/* =========================
DGX CHARACTER SLOT GRID
========================= */

/* =========================
DGX SLOT GRID 3x3
========================= */

.dgx-slot-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
max-width:600px;

}

.dgx-slot-box{

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);

border-radius:10px;

padding:16px;

text-align:center;

cursor:pointer;
transition:.2s;

display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;

height:190px; /* 🔥 tamaño uniforme */
width:190px;

position:relative;

}



.dgx-slot-box:hover{

transform:translateY(-3px);
background:rgba(255,255,255,0.06);

}


.dgx-slot-box.current{

border:2px solid #ff2e82;

}


/* slot seleccionado */

.dgx-slot-box.active{

border:2px solid #8c5bff;
background:rgba(140,91,255,0.15);

transform:translateY(-2px);

}

/* slot actual */

.dgx-slot-box.current{

border:2px solid #ff2e82;

}

/* slot ocupado */

.dgx-slot-box.locked{

opacity:.6;
cursor:not-allowed;

}

/* avatar */

.dgx-slot-avatar{

margin:6px auto;
width: 100px;
height: 100px;

}

/* nombre */

.dgx-slot-name{

margin-top:6px;
font-size:.9rem;
opacity:.8;

max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

}

/* slot vacío */

.dgx-slot-empty{

flex:1;
display:flex;
align-items:center;
justify-content:center;

font-size:32px;
opacity:.4;

}

.dgx-slot-number{

font-size:.85rem;
opacity:.6;
margin-bottom:6px;

}


.dgx-form-label{

display:flex;
align-items:center;
gap:8px;

margin-bottom:10px;

font-weight:600;

}

.dgx-radio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:12px;

}

.dgx-radio{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

padding:12px;

border-radius:10px;

cursor:pointer;

display:flex;

align-items:center;

gap:8px;

}

.dgx-radio:hover{

background:rgba(255,255,255,0.07);

}


/* ===================================================== */
/* ADMIN CARDS GRID (CP LOGS) */
/* ===================================================== */

.dgx-admin-cards{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
	margin-top:20px;
}

.dgx-admin-cards a{
	text-decoration:none;
}

.dgx-admin-cards .dgx-card{
	text-align:center;
	padding:25px 20px;
	cursor:pointer;
	transition:all .25s ease;
}

.dgx-admin-cards .dgx-card:hover{
	transform:translateY(-3px);
}

.dgx-admin-cards span[data-lucide]{
	display:block;
	margin-top:10px;
	width:48px;
	height:48px;
	margin-left:auto;
	margin-right:auto;
	opacity:.8;
}

.dgx-admin-cards .dgx-card-header{
	justify-content:center;
}

/* ===================================================== */
/* HERO LAYOUT */
/* ===================================================== */

.dgx-welcome-wrapper{

	display:flex;
	align-items:center;
	position:relative;

}

/* contenido */

.dgx-welcome-content{

	flex:1;
	max-width:58%;
	z-index:2;

}

.dgx-welcome-ul {
	list-style-type: none;
}

/* logo */

.dgx-welcome-logo img{

	max-width:320px;
	margin-bottom:15px;

}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width:768px){

	.dgx-welcome-wrapper{
		display:block;
	}

	.dgx-welcome-image{
		display:none;
	}

}



/* ===================================================== */
/* PERSONAJES HERO */
/* ===================================================== */

.dgx-welcome-characters{

	position:absolute;

	right:10px;
	bottom:-45px;

	width:480px;

	pointer-events:none;
	z-index:2;

}

/* imagen */

.dgx-welcome-characters img{

	width:100%;
	height:auto;

	transform:translateY(-25px);

}


/* ===================================================== */
/* HERO CHARACTER GLOW */
/* ===================================================== */

.dgx-welcome-characters::before{

	content:"";

	position:absolute;

	width:340px;
	height:340px;

	right:20px;
	bottom:80px;

	border-radius:50%;

	background:radial-gradient(
		circle,
		rgba(255,80,120,0.35) 0%,
		rgba(120,80,255,0.25) 40%,
		rgba(0,0,0,0) 70%
	);

	filter:blur(35px);

	z-index:-1;

}


/* ===================================================== */
/* HERO LINKS */
/* ===================================================== */

.dgx-welcome-links{

	display:flex;
	gap:12px;
	margin-top:15px;

}


/* discord */

.dgx-badge-discord{
	background:#5865F2;
}

/* icono discord */

.dgx-discord-icon{
	width:16px;
	height:16px;
}

.dgx-badge-discord:hover {
    box-shadow: 0 0 18px rgba(255, 80, 150, 0.45);
    transform: translateY(-2px);
}

/* CONTENEDOR DERECHO */

.dgx-activity-meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* FLAG */

.dgx-flag-badge {
	display: flex;
	align-items: center;
	min-width: 18px;
}

/* EVITAR ICONO ROTO */

.dgx-flag-badge img {
	width: 18px;
	height: auto;
	border-radius: 2px;
}

/* SI NO HAY BANDERA → NO OCUPA ESPACIO */

.dgx-flag-badge:empty {
	display: none;
}



/* =====================================================
   BADGE ELEMENT (DGX)
===================================================== */

.dgx-badge-element {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

/* ICONO */
.dgx-badge-element span[data-lucide] {
    width: 12px;
    height: 12px;
}

/* SEPARACIÓN ENTRE BADGES */
.dgx-center .dgx-badge {
    margin: 2px 2px;
}



/* ===================================================== */
/* ================= ACTIVITY SYSTEM =================== */
/* ===================================================== */

.dgx-activity-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
}

.dgx-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  position: relative;
  border-radius: 12px;
  margin-bottom: 10px;

  background: linear-gradient(145deg, #0c1224, #0a0f1e);
  border: 1px solid rgba(255,255,255,0.04);

  transition: all 0.2s ease;
}


/* Hover sutil */
.dgx-activity-item:hover {
  background: linear-gradient(145deg, #101735, #0b1124);
  border-color: rgba(255,255,255,0.08);
}

.dgx-activity-avatar img {
	border-radius: 14px;
}

.dgx-activity-text {
	font-size: 13px;
	font-weight: 500;
}


/* ===================================================== */
/* ================= ACTIVITY SCROLL ==================== */
/* ===================================================== */

#dgx-activity-feed {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;  
  padding-right: 6px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 91, 255, 0.6) transparent;
}

/* Webkit (Chrome, Edge, Safari) */
#dgx-activity-feed::-webkit-scrollbar {
  width: 0;
  transition: width 0.3s;
}

#dgx-activity-feed:hover::-webkit-scrollbar {
  width: 6px;
}

/* 🔥 quitar flechas */
#dgx-activity-feed::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* track */
#dgx-activity-feed::-webkit-scrollbar-track {
  background: transparent;
}

/* thumb */
#dgx-activity-feed::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(140, 91, 255, 0.8),
    rgba(120, 60, 255, 0.6)
  );
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(140, 91, 255, 0.4);  
}

/* hover */
#dgx-activity-feed::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(160, 120, 255, 0.9),
    rgba(140, 91, 255, 0.8)
  );
}





/* ITEMS */

.dgx-activity-feed-item {
	font-size: 13px;
	line-height: 1.4;
	padding: 6px 8px;
	border-radius: 6px;
	transition: background .2s;
}

.dgx-activity-feed-item:hover {
	background: rgba(255,255,255,0.04);
}

/* AVATAR ONLINE GLOW */

.dgx-activity-avatar.online {
	position: relative;
}

.dgx-activity-avatar.online::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,255,150,0.6), transparent 70%);
	z-index: -1;
	filter: blur(4px);
}

.dgx-flag-badge {
	margin-left: 6px;
	display: flex;
	align-items: center;
	min-width: 20px;
}

.dgx-flag-badge:empty {
	display: none;
}


/* ===================================================== */
/* ================= ACTIVITY TIMESTAMP ================= */
/* ===================================================== */



.dgx-activity-time {
  position: absolute;
  top: 8px;
  right: 10px;

  font-size: 11px;
  font-weight: 600;

  padding: 4px 8px;
  border-radius: 6px;

  background: rgba(120, 90, 255, 0.08); /* 🔥 morado suave */
  border: 1px solid rgba(120, 90, 255, 0.2);

  color: #b8a8ff; /* 🔥 acorde al theme */
}


/* ===================================================== */
/* ================= ACTIVITY TYPES ===================== */
/* ===================================================== */

.dgx-activity-item {
  position: relative;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* ================= TYPES ================= */

/* LOGIN */
.dgx-login {
  border-left: 3px solid rgba(120, 255, 180, 0.5);
}

/* ACTIVE */
.dgx-active {
  border-left: 3px solid rgba(100, 180, 255, 0.5);
}

/* ITEM (para futuro) */
.dgx-item {
  border-left: 3px solid rgba(255, 200, 120, 0.5);
}

/* ZENY */
.dgx-zeny {
  border-left: 3px solid rgba(255, 220, 120, 0.5);
}

/* KILL */
.dgx-kill {
  border-left: 3px solid #ff5252;
}


/* GUILD */
.dgx-guild {
  border-left: 3px solid #b388ff;
}


.dgx-activity-content {
  color: #cfd6ff;
  font-size: 14px;
}

/* ===================================================== */
/* ================= ENTRY ANIMATION ==================== */
/* ===================================================== */

@keyframes dgxFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dgx-activity-item.new {
  animation: dgxFadeIn 0.4s ease;
}


.dgx-activity-loading {
  text-align: center;
  padding: 20px;
  opacity: 0.5;
  font-size: 13px;
}

/* ===================================================== */
/* ============== ACTIVITY LOG STYLE ==================== */
/* ===================================================== */

.dgx-activity-line {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  color: #cfd6ff;

  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dgx-time {
  color: #8a94c7;
  font-weight: 500;
  font-size: 10px;
}

.dgx-sep {
  opacity: 0.3;
}

.dgx-icon {
  opacity: 0.8;
}

.dgx-text {
  color: #e6ebff;
}

.dgx-activity-line b {
  color: #fff;
}

/* cartas resaltadas */
.dgx-activity-line:has(.dgx-icon:contains("🃏")) {
  color: #ffd54f;
}


/* línea base */
.dgx-activity-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 🔥 entrada suave */
.dgx-activity-line.new {
    opacity: 0;
    transform: translateX(60px);
}

/* 🔥 salida elegante */
.dgx-activity-line.fade-out {
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.5s ease;
}

#dgx-activity-feed .dgx-activity-line {
    will-change: transform, opacity;
}


.dgx-activity-line.new {
    filter: blur(2px);
}

.dgx-activity-line {
    filter: blur(0);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

.dgx-badge-donate {
    background: linear-gradient(135deg, #ff4d6d, #ff2e82);
    color: #fff;
    border: 1px solid rgba(255, 100, 140, 0.4);
    box-shadow: 0 0 12px rgba(255, 50, 120, 0.25);
    transition: all 0.25s ease;
}

.dgx-badge-donate:hover {
    background: linear-gradient(135deg, #ff6b8a, #ff3f95);
    box-shadow: 0 0 18px rgba(255, 80, 150, 0.45);
    transform: translateY(-2px);
}


.dgx-badge-donate [data-lucide] {
	width:18px;
	height: auto;
	font-weight:700;
}	

/* SOLO ESTO */

.dgx-item-row {
    grid-template-columns: 50px 1fr 140px 100px;
}

.dgx-item-icon img {
    width: 32px;
    height: 32px;
}



.dgx-item-sub {
    font-size: 12px;
    opacity: 0.6;
}

.dgx-item-stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
}

.dgx-item-economy,
.dgx-item-extra {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dgx-row-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* GRID EXACTO DEL DISEÑO */
.dgx-items-modern .dgx-table-row {
    grid-template-columns: 
        60px      /* ID */
        1.8fr     /* Nombre */
        180px     /* Ataque */
        80px      /* Def */		
        80px      /* Peso */		
        150px     /* NPC */
        150px     /* Player */
        80px;     /* Pz */
}



/* NOMBRE */
.dgx-item-title {
    font-weight: 600;
    display: flex;
    gap: 20px;
    align-items: center;
}


.dgx-item-title img {
    width: 42px;
    height: 42px;
}

.dgx-item-sub {
    font-size: 11px;
    opacity: 0.6;
}

/* STATS */
.dgx-col-stats {
    font-size: 12px;
}

/* NPC COLORS */
.dgx-col-npc .sell {
    color: #ff5a5a;
}

.dgx-col-npc .buy {
    color: #00ff9c;
}


/* ALIGNMENTS */
.dgx-center {
    text-align: center;
}

.dgx-right {
    text-align: right;
}

/* HEADER ALIGN */
.dgx-header div:nth-child(6),
.dgx-header div:nth-child(7),
.dgx-header div:nth-child(8) {
    text-align: center;
}

/* BADGE COLORS */
.dgx-badge-dark {
    background: rgba(255,255,255,0.05);
}

.dgx-col-npc .sell {
    color: #ff5a5a;
}

.dgx-col-npc .buy {
    color: #00ff9c;
}



.dgx-monsters-modern .dgx-table-row {
    display: grid;
    grid-template-columns: 
        80px   /* ID */
        2fr    /* MONSTRUO (más grande) */
        90px   /* NIVEL (más chico) */
        1.5fr  /* TYPE */
        120px  /* HP */
        120px; /* CLASE */
    align-items: center;
    gap: 10px;
}

.dgx-monster-icon {
    width: 48px;
    height: 48px;

}

.dgx-monster-title {
    font-weight: 600;
    display: flex;
    gap: 20px;
    align-items: center;
}

.dgx-monster-title img {
    width: 64px;
    height: 64px;
    transform: scale(1.1);
    object-fit: contain;
    image-rendering: pixelated;	
}

.dgx-col-name .dgx-item-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dgx-monster-row:hover {
    background: rgba(255,255,255,0.03);
    transform: translateY(-1px);
    transition: all .15s ease;
}

.dgx-pagination-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    gap: 10px;
}

.dgx-pagination-info {
    opacity: 0.7;
    font-size: 13px;
}


.dgx-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.dgx-pagination a,
.dgx-pagination span {
    margin: 0 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #d6dcff;
    text-decoration: none;
    font-size: 13px;
}

.dgx-pagination a:hover {
    background: rgba(255,255,255,0.1);
}

.dgx-pagination .current {
    background: linear-gradient(135deg, #6a5cff, #9f7bff);
    color: white;
}


.dgx-pagination-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    gap: 15px;
}

.dgx-pagination-left {
    display: flex;
    gap: 6px;
}

.dgx-page-btn {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    text-decoration: none;
    font-size: 13px;
    transition: all .2s ease;
}

.dgx-page-btn:hover {
    background: rgba(255,255,255,0.12);
}

.dgx-page-btn.active {
    background: #6366f1;
    color: #fff;
}

.dgx-pagination-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgx-pagination-right .dgx-select {
    width: 50px; 
}

.dgx-dots {
    padding: 0 6px;
    opacity: 0.5;
}

.dgx-page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap; /* 🔥 evita salto */
}

.dgx-page-jump span {
    white-space: nowrap; /* 🔥 evita que "/ 51" se parta */
}

.dgx-field:focus-within label {
    color: #6366f1;
    opacity: 1;
}



/* LINK BASE */
.dgx-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
    transition: all .2s ease;
}

/* HOVER */
.dgx-sort-link:hover {
    opacity: 1;
    color: #6366f1;
}

/* ICONOS */
.dgx-header span[data-lucide] {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* INDICADOR ↑↓ */
.dgx-sort-indicator {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 2px;
}

/* ACTIVO */
.dgx-sort-link.active {
    color: #6366f1;
    opacity: 1;
}

/* HEADER */
.dgx-header {
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* FILAS HOVER */
.dgx-monster-row {
    transition: all .15s ease;
}

.dgx-monster-row:hover {
    background: rgba(255,255,255,0.03);
    transform: translateY(-1px);
}

/* =========================
   RARITY SYSTEM
========================= */

.rarity-common { border-left: 3px solid #9aa3b2; }
.rarity-uncommon { border-left: 3px solid #4ade80; }
.rarity-rare { border-left: 3px solid #60a5fa; }
.rarity-epic { border-left: 3px solid #a78bfa; }
.rarity-legendary { border-left: 3px solid #f59e0b; }
.rarity-unreleased { border-left: 3px solid #ef4444; }

/* Glow DGX */
.rarity-legendary {
  box-shadow: 0 0 12px rgba(245,158,11,0.35);
}
.rarity-epic {
  box-shadow: 0 0 10px rgba(167,139,250,0.25);
}
.rarity-rare {
  box-shadow: 0 0 8px rgba(96,165,250,0.2);
}

/* Badge */
.rarity-badge {
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
}

.rarity-legendary:hover {
  box-shadow: 0 0 18px rgba(245,158,11,0.5);
}


.dgx-badge.rarity-common { background: #6b7280; }
.dgx-badge.rarity-uncommon { background: #22c55e; }
.dgx-badge.rarity-rare { background: #3b82f6; }
.dgx-badge.rarity-epic { background: #a855f7; }
.dgx-badge.rarity-legendary {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.4);
}


#dgx-tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 9999;

  background: rgba(10, 14, 30, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 6px;

  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

#dgx-tooltip img {
  width: 150px;
  max-width: 170px;
  height: auto;
  display: block;
  border-radius: 12px; 
}


.dgx-item-top {
	align-items: center;
}


.dgx-item-icon-static img {
	width: 32px;
	height: 32px;
}

.dgx-item-id {
	font-size: 12px;
	opacity: 0.6;
	margin-left: 6px;
}

.dgx-item-actions {
	gap: 10px;
	align-items: center;
}


.dgx-item-description {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.dgx-desc-line {
	padding: 4px 0;
	opacity: 0.9;
	line-height: 1.4;
}


.dgx-item-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 30px;
	align-items: center;
}



.dgx-item-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.dgx-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dgx-stat label {
	font-size: 12px;
	opacity: 0.6;
}

.dgx-stat strong {
	font-size: 16px;
}

.dgx-stat-wide {
	grid-column: span 4;
}

.dgx-stat-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: 0.7;
}

.dgx-stat--wide {
	grid-column: span 4;
	display: flex;
	gap: 40px;
}

.dgx-drop-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dgx-drop-item {
	display: grid;
	grid-template-columns: 1fr 120px 100px;
	align-items: center;
	padding: 10px 12px 10px 50px;
	border-radius: 10px;
	background: rgba(255,255,255,0.02);
	transition: 0.2s ease;
	text-decoration: none;
	color: inherit;
	cursor: pointer;	
	position: relative;
	
}

.dgx-drop-head {
	display: grid;
	grid-template-columns: 1fr 120px 100px;
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 12px;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dgx-drop-head-rate {
	text-align: right;
}

.dgx-drop-head-type {
	text-align: center;
}


.dgx-drop-item:hover {
	background: rgba(255,255,255,0.06);
	transform: translateY(-2px);
}

/* LEFT */
.dgx-drop-left {
	display: grid;
	grid-template-columns: 60px 1fr;
	align-items: center;
	gap: 12px;
}


.dgx-drop-mob {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}

.dgx-drop-mob-img {
	height: 50px;
	width: auto;
	object-fit: contain;
	image-rendering: pixelated;
}

.dgx-drop-name {
	font-weight: 500;
}

/* RATE */
.dgx-drop-rate {
	text-align: right;
	font-weight: 600;
	opacity: 0.9;
}

/* TYPE */
.dgx-drop-type {
	display: flex;
	justify-content: center;
}

.dgx-drop-type-icon {
	height: 22px;
}

/* VARIANTS */
.dgx-drop-mvp {
	border-left: 3px solid #f59e0b;
}

.dgx-drop-mini {
	border-left: 3px solid #a855f7;
}


.dgx-drop-name::after {
	content: " →";
	opacity: 0;
	margin-left: 5px;
	transition: 0.2s;
}

.dgx-drop-item:hover .dgx-drop-name::after {
	opacity: 0.6;
}

.dgx-drop-mvp:hover {
	box-shadow: 0 0 10px rgba(245,158,11,0.3);
}

.dgx-drop-type {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dgx-drop-type-icon {
	height: 36px;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}


@keyframes dgx-bounce {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50% { transform: translateY(-60%) scale(1.08); }
}

.dgx-drop-mvp .dgx-drop-type-icon {
	animation: dgx-bounce 1.6s infinite ease-in-out;
}

.dgx-drop-mini .dgx-drop-type-icon {
	animation: dgx-bounce 2.2s infinite ease-in-out;
	opacity: 0.9;
}

.dgx-submenu {
	align-items: center;
}

.dgx-back-link {
	display: flex;
	align-items: center;
	gap: 6px;
	opacity: 0.8;
	transition: 0.2s;
}

.dgx-back-link:hover {
	opacity: 1;
}

.dgx-market-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dgx-market-best {
	color: #f59e0b;
	font-size: 11px;
	opacity: 0.9;
}

.dgx-market-best {
	color: #f59e0b;
	font-size: 12px;
}

.dgx-market-empty {
	opacity: 0.4;
}

.dgx-badge-success {
	background: rgba(34,197,94,0.15);
	color: #22c55e;
	border: 1px solid rgba(34,197,94,0.4);
	font-size: 10px;
	padding: 2px 6px;
	width: fit-content;
}


.dgx-stat {
	min-height: 48px;
}

.dgx-stat small {
	display: block;
	margin-top: 2px;
}


.dgx-card-detail {
    display: none;
    padding: 12px 20px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dgx-card-detail.active {
    display: block;
}

.dgx-card-detail-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dgx-card-block {
    font-size: 13px;
    color: #cbd5f5;
}

.dgx-card-expand {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.dgx-card-row.active .dgx-card-expand {
    max-height: 200px;
    margin-top: 10px;
}

.dgx-card-expand-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
}

.dgx-badge-toggle {
    cursor: pointer;
}

.dgx-cards-modern .dgx-table-row {
    grid-template-columns: 
        80px     /* ID */
        2.5fr    /* CARTA 🔥 */
        2fr      /* DROP */
        1fr
        0.6fr
        1fr
        0.6fr;
}