/* 🌌 BRAWLFLOW THEME 2025 - UI Refinada
   Autor: Franz (Diseño Moderno Adaptado)
   Versión: 1.3 (Dark Neon Dashboard)
   files\public_html\brawlflow\assets\css\theme2025.css
-------------------------------------------------- */

/* 🔤 Fuente moderna */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 🎨 Variables base */
:root {
  --color-bg: #0d111a;
  --color-surface: #161b2e;
  --color-surface-light: #1f2740;
  --color-glass: rgba(25, 35, 60, 0.7);
  --color-accent: #00e6ff;
  --color-accent-2: #7c3aed;
  --color-warning: #ffc83d;
  --color-text: #e1e6ff;
  --color-muted: #7a85a1;
  --radius: 16px;
  --transition: 0.25s ease-in-out;
}

/* 🔧 Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #0f1624, #0a0f1a);
  color: var(--color-text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ---------- 🌐 LAYOUT CORE ---------- */
/* Contenedor principal que envuelve sidebar + main + chat */
.app-frame {
  display: flex;
  height: 100vh;
  width: 100%;
  gap: 20px;
  align-items: stretch;
  overflow: hidden;
}

/* Sidebar izquierdo */
.sidebar {
  flex: 0 0 250px;
  min-width: 200px;
  max-width: 320px;
  height: 100%;
  background: linear-gradient(180deg, #141b2d, #0d1321);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 24px 18px;
  position: relative;
  z-index: 30;
}

/* Main central */
.main-area {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  background: var(--color-bg);
  padding: 24px 32px;
  padding-bottom: 20px;
}

/* Chat derecho */
.chat-panel {
  flex: 0 0 360px;
  min-width: 280px;
  max-width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 20;
}

/* Compatibilidad si usas class="chat" */
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header dentro del main */
.header2025 {
  width: 100%;
}

/* Responsive */
@media (max-width: 1100px) {
  .sidebar { display: none; }
  .chat-panel { display: none; }
  .main-area { padding: 16px; }
}

/* ---------- 🧭 SIDEBAR ---------- */
.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-accent);
}

.sidebar .nav-menu {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar .nav-menu a {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: var(--transition);
}

.sidebar .nav-menu a:hover,
.sidebar .nav-menu a.active {
  background: linear-gradient(90deg, #00e6ff, #7c3aed);
  color: #000;
  transform: translateX(4px);
}

.sidebar .bottom {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ---------- 🔝 HEADER ---------- */
.header2025 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-glass);
  border-radius: var(--radius);
  padding: 12px 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.header2025 h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-accent);
}

.header2025 input {
  background: rgba(255,255,255,0.05);
  border: none;
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  outline: none;
}

/* ---------- 🎮 MATCHMAKING ---------- */
.matchmaking {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.matchmaking .title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.sala-item {
  background: var(--color-surface-light);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sala-item:hover {
  box-shadow: 0 0 16px rgba(0,230,255,0.15);
  transform: translateY(-2px);
}

/* ---------- 🪩 BOTONES ---------- */
.btn {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  border: none;
  color: #000;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(59,226,255,0.3);
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px) scale(1.03);
}

/* ---------- 📊 TABLE RANKING ---------- */
.table-ranking {
  background: var(--color-surface-light);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.table-ranking table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table-ranking th {
  text-align: left;
  color: var(--color-muted);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.table-ranking td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ---------- 💬 CHAT PANEL ---------- */
.chat-panel header {
  padding: 18px 20px;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.message {
  background: rgba(255,255,255,0.05);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.message strong {
  color: var(--color-accent);
}

/* 📩 CHAT INPUT */
.chat-input {
  display: flex;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.chat-input input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 999px;
  outline: none;
}

.chat-input button {
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;
  color: #000;
  transition: var(--transition);
}

.chat-input button:hover {
  background: var(--color-accent-2);
}

/* ---------- ⚡ FOOTER ---------- */
.footer {
  margin-top: auto;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-muted);
  padding: 16px 0;
}

/* ---------- 🧩 SCROLLBAR GLOBAL ---------- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}

/* ---------- 💬 FIX CHAT VISUAL (2025 PATCH) ---------- */

/* Contenedor principal del chat */
.chat-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface);
  border-left: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

/* Ajusta la lista de mensajes */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cada mensaje individual */
.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  padding: 10px 12px;
  border-radius: var(--radius);
  max-width: 95%;
  word-break: break-word;
}

/* Imagen/avatar del usuario */
.message img,
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Contenido del mensaje */
.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Nombre del usuario */
.message-content strong {
  color: var(--color-accent);
  font-size: 0.9rem;
}

/* Texto del mensaje */
.message-content span {
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.3;
}

/* Input del chat */
.chat-input {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0, 0, 0, 0.1);
}

.chat-input input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: none;
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  outline: none;
}

.chat-input button {
  width: 40px;
  height: 40px;
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  color: #000;
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: var(--transition);
}

.chat-input button:hover {
  background: var(--color-accent-2);
}

/* ===================================================
   ⚔️ MODES BAR — Selector de modos de juego
   Aparece bajo el header en layout.php
=================================================== */

.modes-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  padding: 12px 18px;
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.mode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-muted);
  font-size: 0.75rem;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}

.mode-item i {
  font-size: 1.5rem;
  transition: var(--transition);
}

.mode-item:hover {
  color: var(--color-accent);
  transform: translateY(-2px);
}

.mode-item.active {
  color: var(--color-accent);
  font-weight: 600;
}

.mode-item.active i {
  text-shadow: 0 0 10px var(--color-accent);
}

/* ===================================================
   🧱 Ajustes visuales del contenido según modo
=================================================== */
.main-area {
  position: relative;
  transition: all 0.3s ease;
}

.main-area[data-mode="batalla"] {
  background: linear-gradient(180deg, #0f1625, #0a0f1a);
}

.main-area[data-mode="supervivencia"] {
  background: linear-gradient(180deg, #0f1a16, #0a1914);
}

.main-area[data-mode="duelos"] {
  background: linear-gradient(180deg, #15121f, #0c0a14);
}

.main-area[data-mode="eventos"] {
  background: linear-gradient(180deg, #131b2c, #0b101a);
}