/* ====== Fuente y variables ====== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root{
  --bg:#0f1116;
  --panel:#171a22;
  --panel-2:#0e1118;
  --muted:#8b90a0;
  --text:#e9ecf1;
  --accent:#fbff00;      /* Amarillo iZaap */
  --accent-2:#2b2f3b;    /* Borde/grids */
  --success:#37d67a;
  --danger:#ff4e4e;
  --radius:18px;
}

*{ box-sizing:border-box; font-family:'Plus Jakarta Sans',sans-serif; user-select:none; }
html,body{ height:100%; margin:0; background:transparent; color:var(--text); overflow:hidden; }

/* ================= BAN BOX (cartel individual) ================= */
#ban-box{
  display:none; position:absolute; top:50%; right:5%; transform:translateY(-50%);
  width:340px; padding:24px 20px; text-align:center; z-index:9999;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)), var(--panel-2);
  border:1px solid var(--accent-2); border-radius:20px;
  box-shadow:0 16px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  animation:floatUp 6s ease-in-out infinite;
}
#ban-logo{ max-width:86px; margin-bottom:10px; filter:drop-shadow(0 0 6px rgba(0,0,0,.35)); }
.ban-title{ font-size:1.35rem; font-weight:800; letter-spacing:.5px; margin:4px 0 8px; }
#ban-text p{ margin:6px 0; color:#dfe3ea; }
#ban-text p strong{ color:#fff; }

@keyframes floatUp{ 0%,100%{ transform:translateY(-50%) } 50%{ transform:translateY(-52%) } }

/* ================= PANEL ADMIN (layout general) ================= */
#panel{
  display:none; height:100vh; width:100vw; display:flex; justify-content:center; align-items:center;
  animation:dashboardFadeIn .35s ease-out;
  background:rgba(0,0,0,.35);
}

/* ===== Sidebar ===== */
.sidebar{
  min-width:260px; max-width:fit-content; padding:18px;
  background:#11141b;
  border:1px solid var(--accent-2);
  border-top-right-radius:16px; border-bottom-right-radius:16px; border-top-left-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.sidebar h2{
  font-size:28px; text-align:left; margin:6px 6px 18px; letter-spacing:.6px;
  color:#fff; text-shadow:0 0 10px rgba(255,255,255,.12);
}
.sidebar ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sidebar li{
  display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
  background:#0e1118; color:var(--muted);
  border:1px solid var(--accent-2); border-radius:12px; transition:.25s;
  font-weight:700;
}
.sidebar li:hover{ border-color:var(--accent); color:var(--accent); }
.sidebar li.active{
  background:var(--accent); color:#111; border-color:var(--accent);
  box-shadow:0 0 14px rgba(255,174,0,.55);
}

/* ===== Contenido principal ===== */
.main{
  flex:1; width:60%; max-width:60%;
  margin-left:16px; padding:16px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)), var(--panel);
  border:1px solid var(--accent-2); border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  display:flex; flex-direction:column; position:relative;
}
.main h1{
  text-align:center; font-size:34px; margin:6px 0 16px; letter-spacing:.8px;
  text-shadow:0 0 12px rgba(255,255,255,.18);
}
.topbar-logo{ height:86px; display:block; margin:0 auto 6px; filter:drop-shadow(0 0 10px rgba(0,0,0,.35)); }

/* Aviso inferior tipo banner */
.notice, .footer{
  margin-top:18px; padding:10px 14px; text-align:center; font-weight:800; font-size:14px;
  background:rgba(251,255,0,.06); color:var(--accent);
  border:1px solid rgba(251,255,0,.35); border-radius:12px;
  text-shadow:0 0 6px rgba(251,255,0,.25);
}

/* ===== Stats ===== */
.stats{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:8px 0 16px; }
.stat-box{
  width:420px; height:112px; padding:18px 14px; text-align:center;
  background:#0e1118; border-radius:16px;
  border:1px solid var(--accent-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:.2s;
}
.stat-box:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.45); }
.stat-box h2{ margin:0 0 8px; font-size:14px; color:var(--muted); letter-spacing:.6px; }
.stat-box p, .stat-box strong{
  font-size:32px; font-weight:800; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.15);
}

/* ===== Botón cerrar ===== */
.close-btn{
  position:absolute; top:16px; right:16px; cursor:pointer;
  padding:8px 10px; border-radius:10px; border:1px solid var(--accent-2);
  background:#261717; color:#ffb4b4; transition:.2s; font-weight:800;
}
.close-btn:hover{ background:#311b1b; border-color:#7a2a2a; color:#fff; }

/* ===== Secciones ===== */
.section{ display:none; }
.section:not(.hidden){ display:block; }

/* ================== Tablas (DataTables friendly) ================== */
table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; font-size:14px;
  background:#0e1118; color:var(--text); border-radius:12px; overflow:hidden;
  border:1px solid var(--accent-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
thead th{
  background:#11141b; color:#cfd4df; text-transform:uppercase; letter-spacing:.6px;
  padding:12px; text-align:left; border-bottom:1px solid var(--accent-2);
}
tbody td{ padding:12px; border-top:1px solid rgba(255,255,255,.03); }
tbody tr:hover{ background:#111722; }

#bannedPlayersTable,
#activePunishmentsTable,
#onlinePlayersTable{ border-collapse:separate; border-spacing:0 8px; }
#bannedPlayersTable thead th,
#activePunishmentsTable thead th,
#onlinePlayersTable thead th{ background:#11141b; }
#bannedPlayersTable tbody td,
#activePunishmentsTable tbody td,
#onlinePlayersTable tbody td{
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.05);
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin:6px 0 10px; font-size:14px; color:var(--text);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  margin-top:10px; font-size:13px; color:var(--muted);
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:6px 10px; margin:0 2px; border-radius:8px; border:1px solid var(--accent-2);
  background:#0c0f15; color:var(--text) !important; transition:.2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border-color:var(--accent); color:var(--accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent); color:#111 !important; border-color:var(--accent); font-weight:800;
}

/* ================== NUI MODAL ================== */
.nui-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center; z-index:99;
}
.modal-content{
  display:flex; flex-direction:column; gap:12px; max-width:460px; width:92%;
  padding:24px 26px;
  background:#0e1118; color:var(--text);
  border:1px solid var(--accent-2); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  animation:fadeInModal .25s ease;
}
.modal-content h2{
  margin:0 0 8px; text-align:center; font-size:20px; font-weight:800; letter-spacing:.4px;
}
.modal-content label{ font-size:12px; color:var(--muted); margin:2px 0 4px 2px; }
.modal-content input,
.modal-content select,
.modal-content textarea{
  padding:12px 14px; border-radius:12px;
  background:#0c0f15; color:var(--text);
  border:1px solid var(--accent-2); transition:.2s;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color:var(--accent); box-shadow:0 0 8px rgba(255,174,0,.35); outline:none;
}
.modal-content textarea{ resize:none; }

/* Botones modal */
.modal-buttons{ display:flex; justify-content:center; gap:12px; margin-top:10px; }
.modal-buttons button{
  padding:12px 18px; border-radius:12px; cursor:pointer; border:1px solid transparent;
  font-weight:800; transition:.25s; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.modal-buttons button:first-child{ background:var(--success); color:#111; }
.modal-buttons button:first-child:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.modal-buttons button:last-child{ background:#2a1a1a; color:#ffb4b4; border:1px solid #7a2a2a; }
.modal-buttons button:last-child:hover{ background:#311b1b; color:#fff; }

/* ================== Notificaciones (toast modal) ================== */
.custom-toast-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); z-index:9999;
}
.toast-modal-content{
  width:320px; padding:18px; border-radius:12px;
  background:#0e1118; color:var(--text);
  border:1px solid var(--accent-2); box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:fadeInScale .25s ease;
}
.toast-modal-header{ display:flex; align-items:center; justify-content:space-between; font-weight:800; }
.toast-modal-body{ margin-top:8px; font-size:15px; }
.toast-close-btn{
  margin-top:12px; width:100%; padding:10px 14px; border-radius:10px;
  background:var(--accent); color:#111; border:0; cursor:pointer; transition:.2s;
}
.toast-close-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.close-btn[class]{ background:none; border:none; color:var(--text); }

/* ================== Botonería ================== */
.lang-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; cursor:pointer; border:1px solid var(--accent-2);
  background:#0c0f15; color:var(--text);
  transition:.25s; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.lang-btn:hover{ border-color:var(--accent); color:var(--accent); }

.punish-btn{
  padding:8px 14px; border-radius:10px; font-size:14px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.15)), #0e1118;
  color:var(--text); border:1px solid var(--accent-2); transition:.25s;
}
.punish-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }

.offline-punish-button{
  padding:10px 16px; border-radius:12px; font-weight:800; cursor:pointer;
  background:#261717; color:#ffb4b4; border:1px solid #7a2a2a; transition:.25s;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.offline-punish-button:hover{ background:#311b1b; color:#fff; }

/* Botones de selección de ubicación */
.location-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.location-buttons button{
  flex:1; min-width:140px; padding:12px 14px; border-radius:12px; cursor:pointer;
  background:#0c0f15; color:var(--text); border:1px solid var(--accent-2);
  transition:.25s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.location-buttons button:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.location-buttons button.selected{
  background:var(--success); color:#111; border-color:transparent; box-shadow:0 0 12px rgba(55,214,122,.45);
  transform:scale(1.02);
}

/* ================== Utilidades / helpers ================== */
.hidden{ display:none !important; }

/* ================== Animaciones ================== */
@keyframes fadeInScale{ from{ opacity:0; transform:scale(.98) } to{ opacity:1; transform:scale(1) } }
@keyframes fadeInModal{ from{ opacity:0; transform:translateY(20px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes dashboardFadeIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }

/* ================== Scrollbars ================== */
*{ scrollbar-width:thin; scrollbar-color:var(--accent) #0e1118; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:#0e1118; border-radius:10px; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ffc441,var(--accent)); border-radius:10px; border:2px solid #0e1118;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#ffd469,#ffae00); }

/* ================== Responsive ================== */
@media (max-width: 1200px){
  .main{ width:66%; max-width:66%; }
}
@media (max-width: 900px){
  .main{ width:88%; max-width:88%; margin-left:0; }
  .sidebar{ display:none; }
  .stats{ gap:12px; }
  .stat-box{ width:100%; }
}

/* ====== Fuente y variables ====== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root{
  --bg:#0f1116;
  --panel:#171a22;
  --panel-2:#0e1118;
  --muted:#8b90a0;
  --text:#e9ecf1;
  --accent:#fbff00;      /* Amarillo iZaap */
  --accent-2:#2b2f3b;    /* Borde/grids */
  --success:#37d67a;
  --danger:#ff4e4e;
  --radius:16px;
}

*{ box-sizing:border-box; font-family:'Plus Jakarta Sans',sans-serif; user-select:none; }
html,body{ height:100%; margin:0; background:transparent; color:var(--text); overflow:hidden; }

/* ================= BAN BOX (cartel individual) ================= */
#ban-box{
  display:none; position:absolute; top:50%; right:5%; transform:translateY(-50%);
  width:300px; padding:20px 16px; text-align:center; z-index:9999;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)), var(--panel-2);
  border:1px solid var(--accent-2); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  animation:floatUp 6s ease-in-out infinite;
}
#ban-logo{ max-width:70px; margin-bottom:8px; filter:drop-shadow(0 0 6px rgba(0,0,0,.35)); }
.ban-title{ font-size:1.1rem; font-weight:800; margin:2px 0 6px; }
#ban-text p{ margin:4px 0; font-size:13px; }

/* ================= PANEL ADMIN (layout general) ================= */
#panel{
  display:none; height:100vh; width:100vw; display:flex; justify-content:center; align-items:center;
  animation:dashboardFadeIn .35s ease-out;
  background:rgba(0,0,0,.35);
}

/* ===== Sidebar ===== */
.sidebar{
  min-width:200px; padding:14px;
  background:#11141b;
  border:1px solid var(--accent-2);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.sidebar h2{
  font-size:22px; margin:4px 6px 14px; letter-spacing:.5px;
}
.sidebar ul{ gap:8px; }
.sidebar li{
  padding:10px 12px; font-size:13px; border-radius:10px;
}

/* ===== Contenido principal ===== */
.main{
  flex:1; width:50%; max-width:50%;
  margin-left:12px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)), var(--panel);
  border:1px solid var(--accent-2); border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.main h1{
  text-align:center; font-size:24px; margin:4px 0 10px;
}
.topbar-logo{ height:60px; margin:0 auto 6px; }

/* Aviso inferior */
.notice, .footer{
  margin-top:12px; padding:6px 10px; font-size:12px;
  border-radius:10px;
}

/* ===== Stats más pequeñas ===== */
.stats{ gap:10px; margin:6px 0 10px; }
.stat-box{
  width:260px; height:80px; padding:10px; border-radius:12px;
}
.stat-box h2{ font-size:11px; margin:0 0 4px; }
.stat-box p, .stat-box strong{ font-size:20px; }

/* ===== Botón cerrar ===== */
.close-btn{
  top:10px; right:10px; padding:6px 8px; font-size:13px;
  border-radius:8px;
}

/* ================== Tablas ================== */
table{ font-size:12px; }
thead th{ font-size:12px; padding:8px; }
tbody td{ padding:8px; }

/* ================== Modal ================== */
.modal-content{
  max-width:360px; padding:18px;
}
.modal-content h2{ font-size:16px; }
.modal-content input,
.modal-content select,
.modal-content textarea{
  padding:8px 10px; font-size:13px;
}
.modal-buttons button{ padding:8px 14px; font-size:13px; }

/* ================== Toast ================== */
.toast-modal-content{ width:260px; padding:14px; font-size:13px; }
.toast-modal-body{ font-size:13px; }
.toast-close-btn{ font-size:13px; padding:8px 12px; }

/* ================== Responsive ================== */
@media (max-width: 1200px){
  .main{ width:60%; max-width:60%; }
}
@media (max-width: 900px){
  .main{ width:86%; max-width:86%; margin-left:0; }
  .sidebar{ display:none; }
  .stat-box{ width:100%; }
}