:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #121212;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222;
  --bg-input: #1e1e1e;
  --yellow: #FFD700;
  --yellow-dark: #FFC400;
  --yellow-glow: rgba(255,215,0,0.3);
  --yellow-glow-strong: rgba(255,215,0,0.6);
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted: #666;
  --border: #2a2a2a;
  --border-focus: #FFD700;
  --danger: #ff4444;
  --success: #44ff44;
  --warning: #ffaa00;
  --info: #4488ff;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px var(--yellow-glow);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --font-display: 'Orbitron',sans-serif;
  --font-body: 'Rajdhani',sans-serif;
  --font-text: 'Inter',sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; line-height:1.6;
}
#particles-bg {
  position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:0;
  overflow:hidden;
}
canvas#particles-canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,10,10,0.95); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); transition:var(--transition);
}
.header-inner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { font-size:1.5rem; }
.logo-text {
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  background:linear-gradient(135deg,var(--yellow),#fff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo-text .accent { color:var(--yellow); -webkit-text-fill-color:var(--yellow); }
.nav { display:flex; align-items:center; gap:8px; }
.nav-link {
  color:var(--text-secondary); text-decoration:none; font-size:0.95rem;
  font-weight:500; padding:8px 14px; border-radius:var(--radius);
  transition:var(--transition); position:relative;
  font-family:var(--font-text);
}
.nav-link:hover,.nav-link.active { color:var(--yellow); background:rgba(255,215,0,0.08); }
.nav-link.active::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:20px; height:2px; background:var(--yellow); border-radius:2px;
}
.menu-toggle { display:none; background:none; border:none; color:var(--text-primary); font-size:1.5rem; cursor:pointer; }
.nav-auth { display:flex; align-items:center; gap:8px; margin-left:8px; }
.nav-user { display:flex; align-items:center; gap:8px; margin-left:8px; }
.user-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border);
  font-size:0.85rem; color:var(--yellow); font-weight:600;
}
.user-badge .rango-tag {
  font-size:0.7rem; background:var(--yellow); color:#000;
  padding:1px 8px; border-radius:10px; font-weight:700;
}
.btn-logout { color:var(--danger) !important; }
.btn-logout:hover { background:rgba(255,68,68,0.1) !important; }

.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 24px; border-radius:var(--radius); font-family:var(--font-text);
  font-size:0.95rem; font-weight:600; border:none; cursor:pointer;
  transition:var(--transition); text-decoration:none;
}
.btn-sm { padding:7px 16px; font-size:0.85rem; }
.btn-lg { padding:14px 32px; font-size:1.1rem; }
.btn-primary {
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dark));
  color:#000; position:relative; overflow:hidden;
}
.btn-primary:hover {
  box-shadow:var(--shadow-glow); transform:translateY(-2px);
}
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-secondary {
  background:transparent; color:var(--yellow); border:1px solid var(--yellow);
}
.btn-secondary:hover { background:rgba(255,215,0,0.1); box-shadow:var(--shadow-glow); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { box-shadow:0 0 20px rgba(255,68,68,0.4); transform:translateY(-2px); }
.btn-success { background:var(--success); color:#000; }
.btn-success:hover { box-shadow:0 0 20px rgba(68,255,68,0.4); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text-primary); border-color:var(--text-muted); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
.btn .spinner {
  width:18px; height:18px; border:2px solid rgba(0,0,0,0.2);
  border-top-color:#000; border-radius:50%; animation:spin 0.6s linear infinite;
  display:none;
}
.btn.loading .spinner { display:inline-block; }
.btn.loading .btn-text { opacity:0.7; }

.main-content {
  flex:1; margin-top:64px; position:relative; z-index:1;
}
.page { display:none; padding:40px 20px 60px; max-width:1200px; margin:0 auto; width:100%; }
.page.active { display:block; animation:fadeIn 0.4s ease; }

.hero {
  text-align:center; padding:80px 20px 60px; position:relative;
}
.hero-badge {
  display:inline-block; padding:6px 20px; border-radius:20px;
  background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3);
  color:var(--yellow); font-size:0.85rem; font-weight:500; margin-bottom:20px;
  font-family:var(--font-text);
}
.hero-title {
  font-family:var(--font-display); font-size:clamp(2rem,6vw,4.5rem);
  font-weight:900; margin-bottom:16px; line-height:1.1;
}
.hero-title .highlight {
  background:linear-gradient(135deg,var(--yellow),#fff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle {
  font-size:clamp(1rem,2vw,1.3rem); color:var(--text-secondary);
  max-width:600px; margin:0 auto 32px; font-family:var(--font-text); line-height:1.7;
}
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.hero-ip { display:flex; gap:6px; align-items:center; }

.server-ips {
  display:flex; justify-content:center; gap:24px; flex-wrap:wrap;
  padding:24px; background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); max-width:700px; margin:0 auto;
}
.server-ip-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; background:var(--bg-secondary);
  border-radius:var(--radius); border:1px solid var(--border);
}
.server-ip-item .ip-mode {
  font-size:0.75rem; font-weight:600; text-transform:uppercase;
  color:var(--yellow); font-family:var(--font-display);
}
.server-ip-item .ip-address { font-weight:600; color:var(--text-primary); font-family:var(--font-text); }
.server-ip-item .ip-port { color:var(--text-muted); font-size:0.85rem; }
.copy-btn {
  background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3);
  color:var(--yellow); padding:6px 12px; border-radius:6px; cursor:pointer;
  font-size:0.8rem; transition:var(--transition); font-family:var(--font-text);
}
.copy-btn:hover { background:rgba(255,215,0,0.2); }
.copy-btn.copied { background:rgba(68,255,68,0.2); border-color:var(--success); color:var(--success); }

.features {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; margin-top:60px;
}
.feature-card {
  background:var(--bg-card); border-radius:var(--radius-lg); padding:30px;
  border:1px solid var(--border); transition:var(--transition); text-align:center;
}
.feature-card:hover {
  border-color:rgba(255,215,0,0.3); transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,0,0,0.3);
}
.feature-icon { font-size:2.5rem; margin-bottom:16px; display:block; }
.feature-card h3 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:8px; color:var(--yellow); }
.feature-card p { color:var(--text-secondary); font-size:0.95rem; font-family:var(--font-text); }

#copyToast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--bg-card); border:1px solid var(--yellow); color:var(--yellow);
  padding:12px 24px; border-radius:var(--radius); font-weight:600;
  font-family:var(--font-text); z-index:2000; animation:slideUp 0.3s ease;
  display:none;
}

.section-title {
  font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.2rem);
  text-align:center; margin-bottom:8px; color:var(--text-primary);
}
.section-subtitle {
  text-align:center; color:var(--text-secondary); margin-bottom:40px;
  font-family:var(--font-text); font-size:1.05rem;
}

.card {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:24px;
  transition:var(--transition);
}
.card:hover { border-color:rgba(255,215,0,0.2); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.card-body { font-family:var(--font-text); color:var(--text-secondary); line-height:1.7; }

.form-group { margin-bottom:20px; }
.form-label {
  display:block; margin-bottom:6px; font-weight:600; color:var(--text-primary);
  font-size:0.9rem; font-family:var(--font-text);
}
.form-input,.form-select,.form-textarea {
  width:100%; padding:12px 16px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary); font-size:0.95rem;
  font-family:var(--font-text); transition:var(--transition); outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--yellow); box-shadow:0 0 0 3px var(--yellow-glow);
}
.form-textarea { min-height:100px; resize:vertical; }
.form-input.error,.form-select.error,.form-textarea.error { border-color:var(--danger); }
.form-error { color:var(--danger); font-size:0.8rem; margin-top:4px; font-family:var(--font-text); }
.form-checkbox {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:8px 12px; border-radius:6px; transition:var(--transition);
}
.form-checkbox:hover { background:rgba(255,215,0,0.05); }
.form-checkbox input[type="checkbox"] {
  width:18px; height:18px; accent-color:var(--yellow); cursor:pointer;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-section {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:24px; margin-bottom:24px;
}
.form-section h3 {
  font-family:var(--font-display); font-size:1.1rem; color:var(--yellow);
  margin-bottom:4px;
}
.form-section .section-desc {
  color:var(--text-muted); font-size:0.85rem; margin-bottom:16px;
  font-family:var(--font-text);
}

.disponibilidad-grid {
  display:grid; grid-template-columns:120px repeat(7,1fr);
  gap:4px; margin:16px 0;
}
.dispo-header {
  font-weight:600; color:var(--text-secondary); font-size:0.8rem;
  text-align:center; padding:8px 4px; font-family:var(--font-text);
}
.dispo-cell {
  display:flex; align-items:center; justify-content:center;
  padding:4px; background:var(--bg-input); border-radius:4px;
  border:1px solid var(--border); cursor:pointer; transition:var(--transition);
}
.dispo-cell:hover { border-color:var(--yellow); }
.dispo-cell input[type="checkbox"] { width:16px; height:16px; accent-color:var(--yellow); cursor:pointer; }
.dispo-label {
  font-size:0.78rem; color:var(--text-secondary); text-align:right;
  padding-right:8px; display:flex; align-items:center; justify-content:flex-end;
  font-family:var(--font-text);
}

.auth-container {
  max-width:460px; margin:40px auto; padding:32px;
  background:var(--bg-card); border-radius:var(--radius-xl);
  border:1px solid var(--border);
}
.auth-title {
  font-family:var(--font-display); font-size:1.5rem; text-align:center;
  margin-bottom:24px;
}
.auth-link { text-align:center; margin-top:16px; font-family:var(--font-text); color:var(--text-secondary); }
.auth-link a { color:var(--yellow); text-decoration:none; font-weight:600; }
.auth-link a:hover { text-decoration:underline; }

.post-status {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 14px; border-radius:20px; font-size:0.85rem; font-weight:600;
  font-family:var(--font-text);
}
.post-status.pendiente { background:rgba(255,170,0,0.15); color:var(--warning); border:1px solid rgba(255,170,0,0.3); }
.post-status.aceptada { background:rgba(68,255,68,0.15); color:var(--success); border:1px solid rgba(68,255,68,0.3); }
.post-status.rechazada { background:rgba(255,68,68,0.15); color:var(--danger); border:1px solid rgba(255,68,68,0.3); }

.profile-header {
  display:flex; align-items:center; gap:24px; margin-bottom:32px;
  padding:32px; background:var(--bg-card); border-radius:var(--radius-xl);
  border:1px solid var(--border);
}
.profile-avatar {
  width:80px; height:80px; border-radius:50%; background:var(--yellow);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  color:#000; font-weight:900; font-family:var(--font-display);
}
.profile-info h2 { font-family:var(--font-display); font-size:1.5rem; }
.profile-info .rango-badge {
  display:inline-block; padding:4px 16px; border-radius:20px;
  background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.3);
  color:var(--yellow); font-weight:600; font-size:0.9rem; margin-top:4px;
}
.profile-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin-bottom:32px;
}
.stat-card {
  background:var(--bg-card); padding:20px; border-radius:var(--radius-lg);
  border:1px solid var(--border); text-align:center;
}
.stat-card .stat-value { font-family:var(--font-display); font-size:1.8rem; color:var(--yellow); }
.stat-card .stat-label { color:var(--text-muted); font-size:0.85rem; font-family:var(--font-text); }

.admin-layout {
  display:grid; grid-template-columns:240px 1fr; gap:24px; min-height:60vh;
}
.admin-sidebar {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:16px;
}
.admin-sidebar a {
  display:block; padding:10px 16px; border-radius:6px; color:var(--text-secondary);
  text-decoration:none; transition:var(--transition); margin-bottom:4px;
  font-family:var(--font-text); font-size:0.9rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background:rgba(255,215,0,0.1); color:var(--yellow);
}
.admin-content { min-height:400px; }

.admin-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin-bottom:24px;
}
.admin-stat {
  background:var(--bg-card); padding:20px; border-radius:var(--radius-lg);
  border:1px solid var(--border); text-align:center;
}
.admin-stat .stat-num { font-family:var(--font-display); font-size:2rem; color:var(--yellow); }
.admin-stat .stat-lbl { color:var(--text-muted); font-size:0.85rem; font-family:var(--font-text); }

.table-wrap { overflow-x:auto; }
table {
  width:100%; border-collapse:collapse; font-family:var(--font-text);
}
th,td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--text-muted); font-weight:600; font-size:0.85rem; text-transform:uppercase; }
td { color:var(--text-secondary); font-size:0.9rem; }
tr:hover td { background:rgba(255,215,0,0.03); }

.filtros {
  display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.filtro-btn {
  padding:8px 20px; border-radius:20px; background:transparent;
  border:1px solid var(--border); color:var(--text-secondary); cursor:pointer;
  font-family:var(--font-text); font-size:0.85rem; transition:var(--transition);
}
.filtro-btn:hover { border-color:var(--yellow); color:var(--yellow); }
.filtro-btn.active { background:var(--yellow); color:#000; border-color:var(--yellow); font-weight:600; }

.reglas-categorias { display:grid; gap:16px; max-width:800px; margin:0 auto; }
.regla-item {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
  transition:var(--transition);
}
.regla-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.regla-header:hover { background:rgba(255,215,0,0.03); }
.regla-header h3 { font-family:var(--font-display); font-size:1rem; color:var(--text-primary); }
.regla-icon { font-size:1.2rem; margin-right:12px; }
.regla-toggle { color:var(--text-muted); transition:var(--transition); font-size:1.2rem; }
.regla-item.open .regla-toggle { transform:rotate(180deg); color:var(--yellow); }
.regla-body {
  padding:0 20px; max-height:0; overflow:hidden;
  transition:max-height 0.35s ease, padding 0.35s ease;
}
.regla-item.open .regla-body {
  max-height:800px; padding:0 20px 20px;
}
.regla-body ul { list-style:none; padding:0; }
.regla-body li {
  padding:8px 0; color:var(--text-secondary);
  font-family:var(--font-text); font-size:0.9rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.regla-body li:last-child { border-bottom:none; }
.regla-body li::before { content:'▸ '; color:var(--yellow); }

.toast-container {
  position:fixed; top:80px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  padding:14px 20px; border-radius:var(--radius); min-width:280px;
  max-width:420px; font-family:var(--font-text); font-size:0.9rem;
  animation:slideIn 0.3s ease; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
.toast-success { background:rgba(68,255,68,0.15); border:1px solid var(--success); color:var(--success); }
.toast-error { background:rgba(255,68,68,0.15); border:1px solid var(--danger); color:var(--danger); }
.toast-info { background:rgba(68,136,255,0.15); border:1px solid var(--info); color:var(--info); }
.toast-warning { background:rgba(255,170,0,0.15); border:1px solid var(--warning); color:var(--warning); }

.modal-overlay {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.7); z-index:5000; display:none;
  align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.modal-overlay.active { display:flex; }
.modal {
  background:var(--bg-card); border-radius:var(--radius-xl);
  border:1px solid var(--border); padding:32px; max-width:520px;
  width:90%; position:relative; animation:fadeIn 0.25s ease;
}
.modal h3 { font-family:var(--font-display); margin-bottom:12px; font-size:1.2rem; }
.modal p { color:var(--text-secondary); font-family:var(--font-text); margin-bottom:20px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; }

.footer {
  background:var(--bg-secondary); border-top:1px solid var(--border);
  padding:40px 20px 20px; margin-top:auto; position:relative; z-index:1;
}
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; margin-bottom:32px; }
.footer-section h3,.footer-section h4 {
  font-family:var(--font-display); margin-bottom:12px; color:var(--text-primary);
}
.footer-section h4 { font-size:0.95rem; color:var(--yellow); }
.footer-desc { color:var(--text-muted); font-family:var(--font-text); font-size:0.9rem; }
.server-ip { margin-bottom:8px; font-family:var(--font-text); font-size:0.9rem; }
.ip-label { color:var(--text-muted); }
.ip-value { color:var(--yellow); font-weight:500; }
.ip-port { color:var(--text-muted); font-size:0.85rem; }
.footer-section a { display:block; color:var(--text-secondary); text-decoration:none; margin-bottom:6px; font-family:var(--font-text); font-size:0.9rem; transition:var(--transition); }
.footer-section a:hover { color:var(--yellow); }
.footer-bottom { text-align:center; padding-top:20px; border-top:1px solid var(--border); }
.footer-bottom p { color:var(--text-muted); font-size:0.85rem; font-family:var(--font-text); }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

@media(max-width:768px) {
  .menu-toggle { display:block; }
  .nav {
    display:none; position:absolute; top:64px; left:0; right:0;
    background:rgba(10,10,10,0.98); flex-direction:column; padding:16px;
    border-bottom:1px solid var(--border); gap:4px;
  }
  .nav.open { display:flex; }
  .nav-link { width:100%; padding:12px 16px; }
  .nav-auth,.nav-user { flex-direction:column; width:100%; margin-left:0; margin-top:8px; }
  .nav-auth .btn,.nav-user .btn,.nav-user .nav-link { width:100%; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { display:flex; gap:4px; overflow-x:auto; padding:12px; }
  .admin-sidebar a { white-space:nowrap; }
  .hero { padding:40px 16px 30px; }
  .disponibilidad-grid { grid-template-columns:80px repeat(7,1fr); font-size:0.75rem; }
  .profile-header { flex-direction:column; text-align:center; }
}