/* ===========================================================
   THEME.CSS — Versión BRUTAL (Oscuro, Neon, Futurista)
   =========================================================== */

/* Paleta base con más fuerza */
:root {
  --bg: #050505;
  --bg-2: #0b0b0f;
  --panel: #101018;
  --panel-2: #14141f;
  --panel-3: #191926;

  --text: #f0f0ff;
  --text-soft: #cfcfe8;
  --muted: #9c9cb5;

  --morado: #9e4dff;
  --morado-light: #c28dff;
  --morado-dark: #6b1fd7;

  --celeste: #29e3ff;
  --celeste-soft: #82f1ff;
  --celeste-dark: #12889a;

  --rojo: #ff3b4f;
  --rojo-dark: #c72c39;

  --success: #7aff90;

  --radius: 18px;
  --radius-sm: 12px;

  --shadow-neon: 0 0 18px rgba(158,77,255,.45);
  --shadow-neon-blue: 0 0 18px rgba(41,227,255,.4);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.45);

  --transition: .25s ease;
  --transition-fast: .15s ease;
}

/* Fondo brutal con neones */
body {
  background:
    radial-gradient(900px 700px at 15% 0%, rgba(158,77,255,.10), transparent 60%),
    radial-gradient(700px 600px at 120% 20%, rgba(41,227,255,.09), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* ===========================================================
   PANELS — Brutales y Futuristas
   =========================================================== */

.card {
  background: linear-gradient(145deg, rgba(255,255,255,.03), transparent 25%), var(--panel);
  border: 1px solid #1d1d27;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* Halo en hover */
.card:hover {
  box-shadow: var(--shadow-neon);
  transform: translateY(-2px);
}

/* Línea neón lateral */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(var(--morado), var(--celeste));
  opacity: .7;
  transition: var(--transition);
}

.card:hover::before { opacity: 1; width: 4px; }

/* ===========================================================
   BOTONES — Versión Brutal
   =========================================================== */

.btn-brutal {
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, var(--morado), var(--celeste));
  border: none;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-neon);
  transition: var(--transition-fast);
}

.btn-brutal:hover {
  filter: brightness(1.15);
  transform: translateY(-3px);
}

.btn-brutal:active {
  transform: translateY(1px);
  filter: brightness(.92);
}

/* Variante outline brutal */
.btn-brutal-outline {
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 700;
  color: var(--morado-light);
  background: transparent;
  border: 2px solid var(--morado);
  box-shadow: 0 0 10px rgba(158,77,255,.3);
  transition: var(--transition-fast);
}
.btn-brutal-outline:hover {
  background: var(--morado);
  color: #fff;
  box-shadow: var(--shadow-neon);
}

/* ===========================================================
   TÍTULOS — Glow retro
   =========================================================== */

.title-brutal {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .8px;
  text-shadow: 0 0 8px rgba(158,77,255,.8);
  color: var(--morado-light);
}

.sub-brutal {
  font-size: 14px;
  color: var(--celeste-soft);
  opacity: .8;
}

/* ===========================================================
   TABS — Futuristas
   =========================================================== */

.tabs-brutal {
  display: flex;
  gap: 8px;
}

.tab-brutal {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-soft);
  border: 1px solid #222233;
  cursor: pointer;
  transition: var(--transition);
}

.tab-brutal:hover {
  color: var(--morado-light);
  border-color: var(--morado);
}

.tab-brutal.active {
  background: linear-gradient(180deg, var(--panel-3), #14141f);
  border-color: var(--morado);
  color: var(--morado-light);
  box-shadow: var(--shadow-neon);
}

/* ===========================================================
   TABLAS — Estilo Hacker Futurista
   =========================================================== */

.table-brutal {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.table-brutal th {
  background: var(--panel-2);
  padding: 12px;
  color: var(--celeste-soft);
  text-shadow: 0 0 6px rgba(41,227,255,.5);
  border-bottom: 1px solid #20202a;
}

.table-brutal td {
  padding: 12px;
  border-bottom: 1px solid #1b1b25;
}

.table-brutal tr:hover {
  background: rgba(158,77,255,.08);
}

.table-brutal tr:nth-child(even) {
  background: rgba(255,255,255,.03);
}

/* ===========================================================
   STATUS — Neón Vivo
   =========================================================== */

.status-brutal {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-block;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.status-online {
  background: #0f2e1f;
  color: #7affb8;
  box-shadow: 0 0 10px rgba(0,255,180,.35);
}

.status-offline {
  background: #2e0f0f;
  color: #ff7a7a;
  box-shadow: 0 0 10px rgba(255,50,50,.35);
}

.status-process {
  background: #0e1f2e;
  color: #6bd7ff;
  box-shadow: 0 0 10px rgba(50,150,255,.3);
}

/* ===========================================================
   EFECTOS BRUTALES EXTRA
   =========================================================== */

.glow-brutal {
  animation: glowBrutal 2s infinite alternate ease-in-out;
}

@keyframes glowBrutal {
  from { box-shadow: 0 0 8px var(--morado); }
  to   { box-shadow: 0 0 22px var(--celeste); }
}

/* Rayas animadas cyberpunk */
.cyber-line {
  position: relative;
  overflow: hidden;
}

.cyber-line::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: cyberMove 1.5s infinite;
}

@keyframes cyberMove {
  to { left: 100%; }
}

/* Botón estilo "holograma" */
.btn-holo {
  padding: 12px 22px;
  background: transparent;
  border: 2px solid rgba(158,77,255,.5);
  color: var(--morado-light);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  transition: var(--transition);
}

.btn-holo:hover {
  border-color: var(--celeste);
  color: #fff;
  box-shadow: var(--shadow-neon-blue);
}

/* ===========================================================
   ✅ ESTILOS ESPECIALES PARA DUO & ESCUADRA
   =========================================================== */

/* Caja para cada jugador del equipo */
.member-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0b0b0f;
  border: 1px solid #1f1f2a;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;          /* 🔥 más cuadrado */
  margin-bottom: 4px;
  font-weight: 700;
  box-shadow: none;
}

/* Número de kills individual */
.member-kills {
  font-size: 14px;
  font-weight: 700;
}

/* Pastilla verde para kills totales */
.total-kills-pill {
  display: inline-block;
  padding: 6px 12px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 6px;          /* 🔥 ya no ovalado */
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  box-shadow: none;
}

/* ================================
   📱 AJUSTES PARA CELULARES PEQUEÑOS
   ================================ */
@media (max-width: 480px) {

  /* Tabla más compacta */
  table {
    font-size: 11px;
  }

  th, td {
    padding: 6px 4px;
    white-space: nowrap;
  }

  /* Nombre de jugador más compacto */
  .member-box span {
    font-size: 11px;
  }

  /* Kill pill más pequeño */
  .total-kills-pill {
    font-size: 10px;
    padding: 4px 6px;
  }

  /* Estado (LIBRE / OCUPADO) más chico */
  .status-pill {
    font-size: 10px;
    padding: 4px 6px;
  }

  /* Número de casilla */
  .slot-number {
    font-size: 11px;
  }

  /* Scroll horizontal SI NO ENTRA */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ===================================================
   📱 AJUSTE REAL PARA CELULARES PEQUEÑOS
   =================================================== */
@media (max-width: 420px) {

  /* achica TODO el contenido de la tabla */
  .table-wrapper {
    transform: scale(0.88);
    transform-origin: top left;
    width: 113%;
  }

  /* reduce fuentes */
  table th,
  table td {
    font-size: 11px !important;
    padding: 4px 5px !important;
    white-space: nowrap;
  }

  /* nombres y miembros */
  .member-box span {
    font-size: 11px !important;
  }

  /* kills */
  .total-kills-pill,
  .member-kills {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  /* estado */
  .status-pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}
/* ===================================================
   🟢 TORNEO GRATIS X DINERO - ESTILO JUGADORES
   =================================================== */

/* Nombre del jugador */
#tabla-gratis-1 td:nth-child(2),
[id^="tabla-gratis-"] td:nth-child(2) {
  color: #00ff88;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
}

/* Casilla */
[id^="tabla-gratis-"] td:first-child {
  color: #ffffff;
  font-weight: bold;
}

/* Estado */
[id^="tabla-gratis-"] td:last-child {
  color: #00cfff;
  font-weight: bold;
}

/* Hover bonito */
[id^="tabla-gratis-"] tbody tr:hover {
  background: rgba(0, 255, 136, 0.08);
}
/* ===========================
🔥 ULTRA INDICADOR PRO
=========================== */
.mode-indicator {
  margin: 15px 0 20px;
  padding: 2px 12px;       /* altura mínima */
  border-radius: 12px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 1.2;        /* controla la altura de línea en móviles */
  animation: pulse 1.6s infinite;
  transition: all 0.4s ease;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

/* Ajuste específico para pantallas muy pequeñas */
@media (max-width: 480px) {
  .mode-indicator {
    font-size: 15px;       /* un poquito más pequeño */
    padding: 1px 10px;     /* reduce más altura en móvil */
  }
}

.mode-solo {
  background: linear-gradient(135deg,#ffeb3b,#ff9800);
  color: #000;
  box-shadow: 0 0 30px rgba(255,193,7,0.9);
}

.mode-duo {
  background: linear-gradient(135deg,#00e5ff,#0091ea);
  color: #000;
  box-shadow: 0 0 30px rgba(0,229,255,0.9);
}

.mode-escuadra {
  background: linear-gradient(135deg,#ff1744,#b71c1c);
  color: #fff;
  box-shadow: 0 0 30px rgba(255,23,68,0.9);
}

/* 💥 EFECTO GANADOR */
.winner {
  animation: winnerGlow 1s infinite alternate;
}

@keyframes winnerGlow {
  from { box-shadow: 0 0 15px gold; }
  to { box-shadow: 0 0 35px gold; }
}

/* ❤️ LATIDO */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* ====== BOTONES DE SALA (SOLO / DUO / ESCUADRA) PRO ====== */
.tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
}

.tabs .tab {
  flex: 1;
  padding: 8px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
  background: #1b1f2a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ACTIVO */
.tabs .tab.active {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #000;
  box-shadow: 0 0 10px rgba(250,204,21,.6);
}

/* 📱 EXTRA CHICO (teléfonos pequeños) */
@media (max-width: 360px) {
  .tabs .tab {
    font-size: 10px;
    padding: 7px 2px;
  }
}
/* ====== LOGO FREE FIRE | MODO DIOS ====== */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 14px 0;
}

/* ADMIN SIEMPRE A LA DERECHA */
.header > div:last-child {
  position: absolute;
  right: 0;
}

/* TEXTO CENTRAL */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  background: linear-gradient(
    270deg,
    #a855f7,
    #ec4899,
    #22d3ee,
    #a855f7
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation:
    gradientMove 6s ease infinite,
    floatSoft 3.5s ease-in-out infinite;

  filter: drop-shadow(0 0 6px rgba(168,85,247,.6));
}

/* PUNTO DIOS */
.logo .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow:
    0 0 6px #22d3ee,
    0 0 14px rgba(34,211,238,.8);
  animation: dotGod 1.6s infinite ease-in-out;
}

/* ===== ANIMACIONES ===== */

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatSoft {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes dotGod {
  0% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1); opacity: .6; }
}
/* ====== LOGO FREE FIRE | MODO DIOS PROHIBIDO ====== */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 18px 0;
  overflow: hidden;
}

/* ADMIN A LA DERECHA (FIJO) */
.header > div:last-child {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* TEXTO CENTRAL SUPREMO */
.logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;

  background: linear-gradient(
    90deg,
    #7c3aed,
    #ec4899,
    #22d3ee,
    #facc15,
    #7c3aed
  );
  background-size: 500% 500%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation:
    gradientGod 7s ease infinite,
    floatGod 4s ease-in-out infinite;

  filter:
    drop-shadow(0 0 6px rgba(168,85,247,.6))
    drop-shadow(0 0 14px rgba(34,211,238,.35));
}

/* 🔥 AURA PROHIBIDA */
.logo::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle,
    rgba(168,85,247,.25),
    transparent 70%
  );
  filter: blur(18px);
  opacity: .8;
  z-index: -1;
  animation: auraPulse 3.5s infinite ease-in-out;
}

/* 💥 GLITCH SUTIL (NO MOLESTA) */
.logo::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: rgba(255,255,255,.15);
  z-index: -1;
  animation: glitchGod 6s infinite;
}

/* ⚡ PUNTO DIVINO */
.logo .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow:
    0 0 8px #22d3ee,
    0 0 18px rgba(34,211,238,.9),
    0 0 30px rgba(250,204,21,.6);
  animation: dotGodPro 1.6s infinite ease-in-out;
}

/* ====== ANIMACIONES PROHIBIDAS ====== */

@keyframes gradientGod {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatGod {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes auraPulse {
  0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; }
}

@keyframes dotGodPro {
  0% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1); opacity: .6; }
}

@keyframes glitchGod {
  0%, 92%, 100% { transform: translate(0,0); }
  94% { transform: translate(1px,-1px); }
  96% { transform: translate(-1px,1px); }
  98% { transform: translate(1px,1px); }
}
/* ====== HEADER FIX MÓVIL ====== */
.header {
  padding-top: 24px;      /* baja el título */
  padding-bottom: 16px;
  min-height: 72px;       /* da espacio real */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOGO CENTRADO Y VISIBLE */
.logo {
  text-align: center;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 auto;
}

/* AJUSTE EXTRA SOLO EN CELULAR */
@media (max-width: 480px) {
  .header {
    padding-top: 28px;
  }

  .logo {
    font-size: 20px;
  }
}
/* ====== HEADER CENTRADO REAL ====== */
.header {
  position: relative;
  padding-top: 28px;
  padding-bottom: 16px;
  min-height: 72px;
  display: flex;
  justify-content: center;   /* 🔥 centro horizontal */
  align-items: center;       /* 🔥 centro vertical */
}

/* LOGO EXACTAMENTE AL MEDIO */
.logo {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  font-size: 22px;
  line-height: 1.2;
}

/* AJUSTE SOLO MÓVIL */
@media (max-width: 480px) {
  .logo {
    font-size: 20px;
  }
}
/* ===== HEADER SIMPLE Y CENTRADO ===== */
.header {
  display: flex;
  justify-content: center;   /* centro horizontal */
  align-items: center;       /* centro vertical */
  padding: 24px 0 12px;
}

/* TEXTO LOGO */
.logo {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}
/* ===== HEADER CENTRADO DEFINITIVO ===== */
.header {
  display: flex;
  justify-content: center !important;
  align-items: center;
  text-align: center;
}

.logo {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
/* ===== SUBIR HEADER (QUITAR ESPACIO SUPERIOR) ===== */
.header {
  padding-top: 8px !important;   /* antes 28px */
  margin-top: 0 !important;
}

/* Ajuste fino solo móvil */
@media (max-width: 480px) {
  .header {
    padding-top: 4px !important;
  }
}
/* ===== RESET GLOBAL (CLAVE) ===== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== HEADER ARRIBA DEL TODO ===== */
.header {
  padding-top: 6px !important;
  margin-top: 0 !important;
}
.logo {
  font-size: 22px;   /* tamaño normal */
  letter-spacing: 1px;
}

@media (max-width: 480px) {
  .logo {
    font-size: 18px; /* más pequeño en celular */
  }
}
table {
  table-layout: fixed !important;
}
/* ===============================
   ANCHO CORRECTO DE COLUMNAS
   =============================== */

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Casilla */
table th:nth-child(1),
table td:nth-child(1) {
  width: 12%;
}

/* Equipo (Miembros) */
table th:nth-child(2),
table td:nth-child(2) {
  width: 48%;
  white-space: normal;
}

/* Kills Totales */
table th:nth-child(3),
table td:nth-child(3) {
  width: 15%;
  text-align: center;
}

/* Estado */
table th:nth-child(4),
table td:nth-child(4) {
  width: 25%;
  text-align: center;
}
 /* ===============================
    🖤 MODO BLACK — TORNEO SERIO
    =============================== */

 /* Fondo general más negro */
 body {
   background: #050507 !important;
 }

 /* Paneles principales */
 .card,
 .table-wrapper,
 table {
   background: #0b0b10 !important;
 }

 /* Filas de tabla */
 table tbody tr {
   background: #0e0e14 !important;
 }

 table tbody tr:nth-child(even) {
   background: #111118 !important;
 }

 /* Hover limpio */
 table tbody tr:hover {
   background: #161622 !important;
 }

 /* Recuadros de jugador (member-box) */
 .member-box {
   background: #0a0a0f !important;
   border: 1px solid #1f1f2a !important;
   border-radius: 6px !important;
   color: #e5e7eb !important;
   box-shadow: none !important;
 }

 /* Kills totales */
 .total-kills-pill {
   background: #0a0a0f !important;
   border: 1px solid #1f1f2a !important;
   color: #e5e7eb !important;
   border-radius: 6px !important;
   box-shadow: none !important;
 }

 /* Texto secundario */
 .muted,
 .sub-brutal {
   color: #9ca3af !important;
 }