/* =================================================================================
   ARCHIVO: global.css
   Define las variables de color, fuentes y estilos base para toda la página.
   ================================================================================= */

:root {
  /* Paleta de Colores Principal */
  --main-green: #2dd4bf;
  --light-green: #a7f3d0;
  --dark-bg: #0c0a09;
  --panel-bg: #18181b;
  --border-color: #27272a;
  --text-primary: #f8fafc;
  --text-secondary: #a1a1aa;
  --text-danger: #ef4444; /* Para el logout y errores */
  --vengeful-red: #f43f5e;

  /* Rarezas Base */
  --common: #4ade80;
  --uncommon: #22d3ee;
  --rare: #60a5fa;
  --epic: #c084fc;
  --legendary: #facc15;
  --insane: #f43f5e;

  /* Gradientes de Rareza */
  --godly-gradient: linear-gradient(135deg, #f9a8d4, #f5d0fe);
  --subzero-gradient: linear-gradient(135deg, #7dd3fc, #e0f2fe);
  --mythic-gradient: linear-gradient(135deg, #f472b6, #fde047);
  --staff-gradient: linear-gradient(135deg, #a855f7, #c084fc);
  --limited-gradient: linear-gradient(135deg, #4ade80, #86efac);
  --exclusive-gradient: linear-gradient(135deg, #fb923c, #fcd34d);
  --event-gradient: linear-gradient(135deg, #60a5fa, #93c5fd);
  --easter-gradient: linear-gradient(135deg, #fbcfe8, #fce7f3);
  --unobtainable-gradient: linear-gradient(135deg, #a5b4fc, #c7d2fe);
  --hell-gradient: linear-gradient(135deg, #b91c1c, #dc2626);
  --evil-gradient: linear-gradient(135deg, #ef4444, #f87171);

  /* --- NUEVAS VARIABLES PARA TÍTULOS --- */
  --title-player-color: #a1a1aa; /* Gris */
  --title-member-gradient: linear-gradient(135deg, #2dd4bf, #a7f3d0); /* main-green */
  --title-gamedeveloper-gradient: var(--staff-gradient); /* Mismo que Staff */
  --title-100t-gradient: linear-gradient(135deg, #4ade80, #bef264); /* Verde */
  --title-250t-gradient: linear-gradient(135deg, #facc15, #fde047); /* Dorado */
  --title-tester-gradient: var(--subzero-gradient); /* Mismo que Subzero */
  --title-owner-gradient: linear-gradient(135deg, #ec4899, #a5b4fc); /* Rosado-Azulado */

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);

  /* Radio de Bordes */
  --border-radius-sm: 0.375rem; /* 6px */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 0.75rem; /* 12px */

  /* Transiciones */
  --transition-fast: all 0.2s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
}

/* Reseteo básico y estilos del body */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--dark-bg);
  color: var(--text-primary);
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Estilo de enlaces genérico */
a {
  color: var(--main-green);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  filter: brightness(1.2);
}

/* Estilo para las barras de scroll */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
  border: 2px solid var(--dark-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--main-green);
}

/* Clases de utilidad para vistas (No se usa activamente con el nuevo router de JS, pero se mantiene por si acaso) */
.main-view-panel {
  display: none;
}