/**
 * L2Hispano Dashboard - Gaming Design System
 * Inspirado en Discord, Steam, Epic Games
 * Base profesional + toques gaming
 */

/* ============================================
   VARIABLES - SISTEMA DE DISEÑO
   ============================================ */
:root {
    /* === COLORES PRIMARIOS === */
    /* Brand - Púrpura gaming */
    --brand-primary: #5865f2;        /* Discord Blurple */
    --brand-primary-hover: #4752c4;
    --brand-primary-light: #7289da;
    --brand-primary-dark: #4752c4;
    
    /* === COLORES SEMÁNTICOS === */
    /* Success - Verde */
    --success: #3ba55d;              /* Discord Green */
    --success-hover: #2d7d46;
    --success-light: rgba(59, 165, 93, 0.1);
    
    /* Error - Rojo */
    --error: #ed4245;                /* Discord Red */
    --error-hover: #c03537;
    --error-light: rgba(237, 66, 69, 0.1);
    
    /* Warning - Amarillo */
    --warning: #faa61a;              /* Discord Yellow */
    --warning-hover: #e89015;
    --warning-light: rgba(250, 166, 26, 0.1);
    
    /* Info - Azul */
    --info: #00b0f4;                 /* Steam Blue */
    --info-hover: #0095cc;
    --info-light: rgba(0, 176, 244, 0.1);
    
    /* === FONDOS - MODO OSCURO GAMING === */
    --bg-primary: #1e1f22;           /* Discord Dark */
    --bg-secondary: #2b2d31;         /* Discord Secondary */
    --bg-tertiary: #313338;          /* Discord Tertiary */
    --bg-elevated: #383a40;          /* Elevated elements */
    --bg-modifier: rgba(0, 0, 0, 0.2);
    
    /* === TEXTOS === */
    --text-primary: #f2f3f5;         /* Casi blanco */
    --text-secondary: #b5bac1;       /* Gris claro */
    --text-tertiary: #949ba4;        /* Gris medio */
    --text-muted: #80848e;           /* Gris oscuro */
    
    /* === BORDES === */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-normal: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    
    /* === SOMBRAS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    
    /* === ESPACIADO - 8pt Grid === */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    
    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* === TRANSICIONES === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === TIPOGRAFÍA === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Tamaños */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    
    /* Pesos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

/* ============================================
   RESET Y BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-normal) !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
    background-color: var(--bg-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    
    font-weight: var(--font-bold) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

h1 { font-size: var(--text-4xl) !important; }
h2 { font-size: var(--text-3xl) !important; }
h3 { font-size: var(--text-2xl) !important; }
h4 { font-size: var(--text-xl) !important; font-weight: var(--font-semibold) !important; }
h5 { font-size: var(--text-lg) !important; font-weight: var(--font-semibold) !important; }
h6 { font-size: var(--text-base) !important; font-weight: var(--font-semibold) !important; }

p {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.epic-dashboard {
    background: var(--bg-primary) !important;
    min-height: 100vh !important;
    padding-top: 60px !important;
}

/* ============================================
   CARDS - ESTILO GAMING
   ============================================ */
.dashboard-card,
.card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    transition: all var(--transition-normal) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dashboard-card:hover,
.card:hover {
    border-color: var(--border-normal) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* Card header */
.card-header {
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.card-header h3 {
    color: var(--text-primary) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--font-semibold) !important;
}

/* Card content */
.card-content,
.card-body {
    color: var(--text-secondary) !important;
}

/* ============================================
   BOTONES - SISTEMA COMPLETO
   ============================================ */
button,
.btn {
    font-family: var(--font-family) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    padding: var(--space-3) var(--space-6) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    text-decoration: none !important;
}

/* Botón primario - Brand */
.btn-primary,
button[type="submit"] {
    background: var(--brand-primary) !important;
    color: white !important;
}

.btn-primary:hover,
button[type="submit"]:hover {
    background: var(--brand-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
}

/* Botón success */
.btn-success {
    background: var(--success) !important;
    color: white !important;
}

.btn-success:hover {
    background: var(--success-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Botón danger */
.btn-danger,
.logout-btn {
    background: var(--error) !important;
    color: white !important;
}

.btn-danger:hover,
.logout-btn:hover {
    background: var(--error-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Botón secundario - Outline */
.btn-secondary {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
}

.btn-secondary:hover {
    background: var(--bg-modifier) !important;
    border-color: var(--text-tertiary) !important;
}

/* Botón ghost */
.btn-ghost {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.btn-ghost:hover {
    background: var(--bg-modifier) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   INPUTS Y FORMULARIOS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    font-family: var(--font-family) !important;
    font-size: var(--text-base) !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-fast) !important;
    width: 100% !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1) !important;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--border-normal) !important;
}

/* Labels */
label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
}

/* ============================================
   BADGES Y PILLS
   ============================================ */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.badge-primary {
    background: var(--brand-primary-light) !important;
    color: white !important;
}

.badge-success {
    background: var(--success-light) !important;
    color: var(--success) !important;
}

.badge-error {
    background: var(--error-light) !important;
    color: var(--error) !important;
}

.badge-warning {
    background: var(--warning-light) !important;
    color: var(--warning) !important;
}

.badge-info {
    background: var(--info-light) !important;
    color: var(--info) !important;
}

/* ============================================
   ALERTS Y MENSAJES
   ============================================ */
.alert {
    padding: var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border-left: 4px solid !important;
    margin-bottom: var(--space-4) !important;
    font-size: var(--text-sm) !important;
}

.alert-success {
    background: var(--success-light) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.alert-error {
    background: var(--error-light) !important;
    border-color: var(--error) !important;
    color: var(--error) !important;
}

.alert-warning {
    background: var(--warning-light) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

.alert-info {
    background: var(--info-light) !important;
    border-color: var(--info) !important;
    color: var(--info) !important;
}

/* ============================================
   TABLAS
   ============================================ */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

table thead {
    background: var(--bg-tertiary) !important;
}

table thead th {
    padding: var(--space-4) !important;
    text-align: left !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

table tbody tr {
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background var(--transition-fast) !important;
}

table tbody tr:hover {
    background: var(--bg-modifier) !important;
}

table tbody tr:last-child {
    border-bottom: none !important;
}

table tbody td {
    padding: var(--space-4) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
}

/* ============================================
   SIDEBAR - ESTILO DISCORD
   ============================================ */
.dashboard-sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-subtle) !important;
    width: 280px !important;
    height: 100vh !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    overflow-y: auto !important;
    z-index: 50 !important;
}

/* Sidebar header */
.sidebar-header {
    padding: var(--space-6) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    background: var(--bg-tertiary) !important;
}

.sidebar-header h4 {
    font-size: var(--text-base) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--text-primary) !important;
}

.user-status {
    font-size: var(--text-sm) !important;
    color: var(--text-tertiary) !important;
    margin-top: var(--space-1) !important;
}

/* Menu items */
.sidebar-menu-roman {
    padding: var(--space-4) !important;
}

.sidebar-menu-roman .menu-item {
    display: flex !important;
    align-items: center !important;
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-2) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-medium) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    border: 1px solid transparent !important;
}

.sidebar-menu-roman .menu-item:hover {
    background: var(--bg-modifier) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.sidebar-menu-roman .menu-item.active {
    background: var(--brand-primary) !important;
    color: white !important;
    font-weight: var(--font-semibold) !important;
}

.sidebar-menu-roman .menu-item::before {
    margin-right: var(--space-3) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-tertiary) !important;
    min-width: 2rem !important;
}

.sidebar-menu-roman .menu-item.active::before {
    color: white !important;
}

/* ============================================
   HEADER - ESTILO GAMING
   ============================================ */
.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    z-index: 100 !important;
    box-shadow: var(--shadow-md) !important;
}

.header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 var(--space-6) !important;
    max-width: 100% !important;
}

/* Logo */
.logo-text {
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.05em !important;
}

/* Navigation */
.main-nav ul {
    display: flex !important;
    list-style: none !important;
    gap: var(--space-2) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-nav a {
    display: flex !important;
    align-items: center !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-medium) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
}

.main-nav a:hover {
    background: var(--bg-modifier) !important;
    color: var(--text-primary) !important;
}

.main-nav a.active {
    background: var(--brand-primary) !important;
    color: white !important;
}

/* Header right section */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
}

/* User info */
.user-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.welcome-text {
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
}

/* ============================================
   SERVER SWITCHER
   ============================================ */
.server-switcher {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.server-switcher .label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.server-switcher select {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-4) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.server-switcher select:hover {
    border-color: var(--border-normal) !important;
    background: var(--bg-elevated) !important;
}

.server-switcher select:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1) !important;
}

/* ============================================
   STATS CARDS
   ============================================ */
.stat-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    transition: all var(--transition-normal) !important;
}

.stat-card:hover {
    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.stat-value {
    font-size: var(--text-3xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    line-height: 1 !important;
    margin-bottom: var(--space-2) !important;
}

.stat-label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.stat-change {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    margin-top: var(--space-2) !important;
}

.stat-change.positive {
    color: var(--success) !important;
}

.stat-change.negative {
    color: var(--error) !important;
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.dashboard-grid {
    display: grid !important;
    gap: var(--space-6) !important;
    grid-template-columns: repeat(12, 1fr) !important;
}

.col-span-1 { grid-column: span 1 !important; }
.col-span-2 { grid-column: span 2 !important; }
.col-span-3 { grid-column: span 3 !important; }
.col-span-4 { grid-column: span 4 !important; }
.col-span-5 { grid-column: span 5 !important; }
.col-span-6 { grid-column: span 6 !important; }
.col-span-7 { grid-column: span 7 !important; }
.col-span-8 { grid-column: span 8 !important; }
.col-span-9 { grid-column: span 9 !important; }
.col-span-10 { grid-column: span 10 !important; }
.col-span-11 { grid-column: span 11 !important; }
.col-span-12 { grid-column: span 12 !important; }

/* ============================================
   UTILIDADES
   ============================================ */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }

.text-success { color: var(--success) !important; }
.text-error { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }

.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-tertiary { background: var(--bg-tertiary) !important; }

/* ============================================
   SCROLLBAR PERSONALIZADA
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .col-span-3,
    .col-span-4 {
        grid-column: span 6 !important;
    }
}

@media (max-width: 768px) {
    .dashboard-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .dashboard-sidebar.open {
        transform: translateX(0);
    }

    .col-span-3,
    .col-span-4,
    .col-span-6 {
        grid-column: span 12 !important;
    }

    .header-content {
        padding: 0 var(--space-4) !important;
    }
}