@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* Paleta del server LS2080 */
  --magenta:      #ff00ff;
  --magenta-dim:  rgba(255,0,255,0.15);
  --magenta-glow: rgba(255,0,255,0.4);
  --pink:         #cc44cc;
  --blue-deep:    #0d0d2b;
  --blue-mid:     #1a1a6e;
  --blue-neon:    #4444ff;
  --gold:         #ffcc00;
  --gold-dim:     rgba(255,204,0,0.15);
  --gold-glow:    rgba(255,204,0,0.5);
  --orange:       #ff9900;
  --black:        #050508;
  --white:        #f0e8ff;
  --white-dim:    rgba(240,232,255,0.55);
  --border:       rgba(255,0,255,0.2);
  --border-strong:rgba(255,0,255,0.5);

  --font-display: 'Orbitron', monospace;
  --font-ui:      'Rajdhani', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  --radius: 4px;
  --radius-lg: 10px;
  --transition: 0.2s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font-ui);
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scanlines overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events:none;
  z-index:9999;
}

/* Grid de fondo */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,0,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events:none;
  z-index:0;
}

/* ============================================ */
/* NAVBAR */
/* ============================================ */
.navbar {
  position:sticky; top:0; z-index:100;
  background: rgba(5,5,8,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}

.navbar::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--gold), var(--magenta), transparent);
}

.navbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.navbar-logo  { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 0 6px var(--magenta-glow)); }

.navbar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--white);
  text-transform: uppercase;
}
.navbar-title span { color: var(--magenta); text-shadow: 0 0 10px var(--magenta-glow); }

.navbar-right { display:flex; align-items:center; gap:14px; }
.user-avatar  { width:34px; height:34px; border-radius:50%; border:2px solid var(--magenta); filter:drop-shadow(0 0 4px var(--magenta-glow)); object-fit:cover; }
.user-name    { font-family:var(--font-mono); font-size:13px; color:var(--white-dim); }

/* ============================================ */
/* LAYOUT */
/* ============================================ */
.container {
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  padding:36px 24px;
}

/* ============================================ */
/* CARDS */
/* ============================================ */
.card {
  background: rgba(13,13,43,0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(8px);
}

.card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--gold), transparent);
}

/* ============================================ */
/* BOTONES */
/* ============================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px;
  border-radius: var(--radius);
  border:none;
  font-family: var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer;
  transition: all var(--transition);
  text-decoration:none;
  position:relative;
  overflow:hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-neon));
  color: white;
  border: 1px solid var(--magenta);
  box-shadow: 0 0 12px rgba(68,68,255,0.3), inset 0 0 12px rgba(255,0,255,0.05);
}
.btn-primary:hover {
  box-shadow: 0 0 24px var(--magenta-glow), 0 0 48px rgba(68,68,255,0.3);
  transform: translateY(-1px);
  border-color: var(--magenta);
}

.btn-discord {
  background: #5865f2;
  color: white;
  border: 1px solid rgba(88,101,242,0.5);
  padding:14px 28px; font-size:15px;
}
.btn-discord:hover {
  background:#4752c4;
  box-shadow: 0 0 24px rgba(88,101,242,0.5);
  transform: translateY(-2px);
}

.btn-success {
  background: rgba(0,255,100,0.08);
  color: #00ff64;
  border: 1px solid rgba(0,255,100,0.3);
}
.btn-success:hover { background:rgba(0,255,100,0.18); box-shadow:0 0 12px rgba(0,255,100,0.3); }

.btn-danger {
  background: rgba(255,0,80,0.08);
  color: #ff0050;
  border: 1px solid rgba(255,0,80,0.3);
}
.btn-danger:hover { background:rgba(255,0,80,0.18); box-shadow:0 0 12px rgba(255,0,80,0.3); }

.btn-ghost {
  background: transparent;
  color: var(--white-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color:var(--border-strong); color:var(--white); }

.btn-gold {
  background: linear-gradient(135deg, #cc8800, var(--gold));
  color: #000;
  border: none;
  font-weight:900;
}
.btn-gold:hover { box-shadow:0 0 24px var(--gold-glow); transform:translateY(-1px); }

.btn-sm  { padding:6px 12px; font-size:11px; }
.btn-lg  { padding:16px 36px; font-size:15px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

/* ============================================ */
/* FORMULARIOS */
/* ============================================ */
.form-group   { margin-bottom:18px; }
.form-label {
  display:block;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--magenta); margin-bottom:8px;
  text-shadow:0 0 8px var(--magenta-glow);
}
.form-label .required { color:var(--gold); margin-left:4px; }

.form-input, .form-textarea, .form-select {
  width:100%; padding:12px 14px;
  background: rgba(13,13,43,0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-ui); font-size:14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline:none;
  border-color:var(--magenta);
  box-shadow: 0 0 0 2px var(--magenta-dim), 0 0 16px var(--magenta-dim);
}
.form-textarea { resize:vertical; min-height:120px; }
.form-hint     { font-size:12px; color:var(--white-dim); margin-top:6px; font-family:var(--font-mono); }

.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.form-section-title {
  font-family:var(--font-display); font-size:14px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
  text-shadow:0 0 12px var(--gold-glow);
}
.form-section-title::before {
  content:''; display:inline-block;
  width:3px; height:18px;
  background:linear-gradient(180deg,var(--magenta),var(--gold));
  border-radius:2px;
}

.form-checkbox {
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:14px; background:rgba(13,13,43,0.6);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color var(--transition);
}
.form-checkbox:hover { border-color:var(--border-strong); }
.form-checkbox input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--magenta); }

/* ============================================ */
/* BADGES / ESTADOS */
/* ============================================ */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
}
.badge-revision { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(255,204,0,.3); }
.badge-aprobado { background:rgba(0,255,100,.1); color:#00ff64; border:1px solid rgba(0,255,100,.3); }
.badge-rechazado{ background:rgba(255,0,80,.1); color:#ff0050; border:1px solid rgba(255,0,80,.3); }

.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse-dot 1.8s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ============================================ */
/* STATS */
/* ============================================ */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.stat-card {
  background:rgba(13,13,43,0.8); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px; text-align:center;
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--magenta),transparent);
}
.stat-number { font-family:var(--font-display); font-size:36px; font-weight:900; line-height:1; margin-bottom:6px; }
.stat-label  { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--white-dim); }

/* ============================================ */
/* TABLA */
/* ============================================ */
.table-container { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
  padding:13px 16px; text-align:left;
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--magenta);
  background:rgba(13,13,43,0.95); border-bottom:1px solid var(--border);
  text-shadow:0 0 8px var(--magenta-glow);
}
.table td { padding:13px 16px; border-bottom:1px solid rgba(255,0,255,0.05); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr { background:rgba(13,13,43,0.6); transition:background var(--transition); }
.table tr:hover { background:rgba(26,26,110,0.4); }
.table tr.clickable { cursor:pointer; }
.user-cell { display:flex; align-items:center; gap:10px; }
.user-cell img { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); }

/* ============================================ */
/* MODAL */
/* ============================================ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(6px);
  z-index:1000; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.active { display:flex; }
.modal {
  background:rgba(10,10,30,0.98); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); width:100%; max-width:700px; max-height:90vh;
  overflow-y:auto; position:relative;
  box-shadow:0 0 60px var(--magenta-dim), 0 0 120px rgba(68,68,255,0.1);
}
.modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--magenta),var(--gold),var(--magenta),transparent);
}
.modal-header { padding:18px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(10,10,30,0.98); z-index:10; }
.modal-title  { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:1px; color:var(--gold); text-shadow:0 0 10px var(--gold-glow); }
.modal-close  { background:none; border:none; color:var(--white-dim); cursor:pointer; font-size:24px; line-height:1; transition:color var(--transition); }
.modal-close:hover { color:var(--magenta); text-shadow:0 0 10px var(--magenta-glow); }
.modal-body   { padding:24px; }
.modal-footer { padding:14px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ============================================ */
/* LOADING */
/* ============================================ */
.loading-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(5,5,8,0.9); z-index:999;
  align-items:center; justify-content:center; flex-direction:column; gap:20px;
}
.loading-overlay.active { display:flex; }
.spinner {
  width:44px; height:44px;
  border:3px solid var(--border);
  border-top-color:var(--magenta);
  border-right-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
  box-shadow:0 0 20px var(--magenta-glow);
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================ */
/* ALERTS / TOAST */
/* ============================================ */
.alert {
  padding:12px 16px; border-radius:var(--radius); margin-bottom:18px;
  font-size:13px; font-weight:500; display:flex; align-items:flex-start; gap:10px;
  font-family:var(--font-mono);
}
.alert-success { background:rgba(0,255,100,.08); color:#00ff64; border:1px solid rgba(0,255,100,.25); }
.alert-error   { background:rgba(255,0,80,.08); color:#ff0050; border:1px solid rgba(255,0,80,.25); }
.alert-info    { background:var(--magenta-dim); color:var(--magenta); border:1px solid var(--border); }
.alert-warning { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(255,204,0,.3); }

.toast-container { position:fixed; top:70px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:12px 18px; border-radius:var(--radius); font-size:13px; font-weight:600;
  min-width:260px; font-family:var(--font-mono);
  animation:slideIn .3s ease;
  display:flex; align-items:center; gap:10px;
}
.toast-success { background:#001a0d; color:#00ff64; border:1px solid rgba(0,255,100,.4); box-shadow:0 0 20px rgba(0,255,100,.2); }
.toast-error   { background:#1a0008; color:#ff0050; border:1px solid rgba(255,0,80,.4); box-shadow:0 0 20px rgba(255,0,80,.2); }
.toast-info    { background:#1a001a; color:var(--magenta); border:1px solid var(--border-strong); box-shadow:0 0 20px var(--magenta-dim); }
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ============================================ */
/* SECTION HEADERS */
/* ============================================ */
.section-header { margin-bottom:28px; }
.section-tag {
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--magenta);
  margin-bottom:6px; text-shadow:0 0 8px var(--magenta-glow);
}
.section-title { font-family:var(--font-display); font-size:28px; font-weight:900; letter-spacing:1px; line-height:1.1; }
.section-title span { color:var(--gold); text-shadow:0 0 16px var(--gold-glow); }
.section-desc  { margin-top:8px; color:var(--white-dim); font-size:14px; max-width:600px; font-family:var(--font-mono); }

/* ============================================ */
/* DETAIL ROWS */
/* ============================================ */
.detail-row { display:flex; gap:8px; padding:10px 0; border-bottom:1px solid rgba(255,0,255,0.06); font-size:14px; }
.detail-row:last-child { border-bottom:none; }
.detail-key { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--magenta); min-width:160px; flex-shrink:0; }
.detail-value { color:var(--white); }

/* ============================================ */
/* FILTER BAR */
/* ============================================ */
.filter-bar { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.filter-btn {
  padding:5px 14px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--white-dim);
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background:var(--magenta-dim); border-color:var(--border-strong);
  color:var(--magenta); text-shadow:0 0 8px var(--magenta-glow);
}

/* ============================================ */
/* PAGINATION */
/* ============================================ */
.pagination { display:flex; align-items:center; gap:6px; margin-top:18px; justify-content:center; }
.page-btn {
  width:32px; height:32px; border-radius:var(--radius); border:1px solid var(--border);
  background:transparent; color:var(--white-dim); font-family:var(--font-display);
  font-size:13px; font-weight:700; cursor:pointer; transition:all var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.page-btn:hover, .page-btn.active { border-color:var(--magenta); color:var(--magenta); background:var(--magenta-dim); }
.page-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width:768px) {
  .navbar { padding:0 14px; }
  .container { padding:20px 14px; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .section-title { font-size:22px; }
  .table { font-size:13px; }
  .table th, .table td { padding:10px 10px; }
}