/**
 * Variables CSS Compartidas
 */
 :root {
    --bg-color: #0d1117;
    --primary-text: #c9d1d9;
    --accent-color: #58a6ff;
    --success-color: #238636;
    --warning-color: #fca311;
    --error-color: #da3333;
    --border-color: #30363d;
    --card-bg: #161b22;
    --glass-bg: rgba(22, 27, 34, 0.7);
    --glass-bg-dark: rgba(22, 27, 34, 0.8);
    --font-main: 'Roboto', Arial, sans-serif;
    --font-tech: 'Orbitron', monospace;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
    --border-width: 2px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 25px rgba(88, 166, 255, 0.3);
    --shadow-lg: 0 15px 35px rgba(88, 166, 255, 0.3);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* DEBUG info */
.matrix-debug {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
    color: #0F0;
    font-family: monospace;
    font-size: 12px;
    background: rgba(0,0,0,0.8);
    padding: 5px;
    border-radius: 3px;
    display: none; /* Oculto por defecto, cambiar a 'block' para debug */
}