/* Sistema de Diseño y Variables CSS de DarkNetwork */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Tipografía */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Paleta de Colores (Tema Oscuro Premium) */
    --bg-main: #060913;
    --bg-surface: #0f1524;
    --bg-surface-glass: rgba(15, 21, 36, 0.65); /* Aumentada la transparencia para glassmorphism */
    --bg-card: #151d30;
    --bg-card-hover: #1c263e;
    
    /* Colores de Acento (Fintech) */
    --color-primary: #00d2ff;
    --color-primary-hover: #00b0d8;
    --color-secondary: #7000ff;
    --color-success: #00e676;
    --color-warning: #ffb300;
    --color-danger: #ff1744;
    --color-info: #2979ff;

    /* Gradientes */
    --grad-primary: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
    --grad-accent: linear-gradient(135deg, #7000ff 0%, #d200ff 100%);
    --grad-success: linear-gradient(135deg, #00e676 0%, #00b0ff 100%);
    --grad-dark: linear-gradient(180deg, #060913 0%, #0b0f1d 100%);
    --grad-card: linear-gradient(145deg, #151d30 0%, #0f1524 100%);

    /* Colores de Texto */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-success: #69f0ae;
    --text-warning: #ffd740;
    --text-danger: #ff5252;

    /* Bordes y Líneas */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-focus: rgba(0, 210, 255, 0.5);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    /* Sombras y Efectos Premium */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 210, 255, 0.4);
    --shadow-glow-success: 0 0 20px rgba(0, 230, 118, 0.4);
    --shadow-glow-danger: 0 0 20px rgba(255, 23, 68, 0.4);
    
    /* Desenfoques de Vidrio */
    --glass-blur-sm: blur(8px);
    --glass-blur-md: blur(16px);
    --glass-blur-lg: blur(24px);

    /* Dimensiones */
    --sidebar-width: 260px;
    --header-height: 70px;
    --transition-speed: 0.3s;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}